<!DOCTYPE html>
<html lang="zh-CN" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Form表单 | 龙陌的博客</title>
    <meta name="description" content="基于vite为基础搭建的风格脚手架,提供多种模板以便于更高效的解决业务需求！">
    <meta name="generator" content="VitePress v1.0.1">
    <link rel="preload stylesheet" href="/long-press/assets/style.BL65bImA.css" as="style">
    
    <script type="module" src="/long-press/assets/app.CKtEL6mi.js"></script>
    <link rel="preload" href="/long-press/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
    <link rel="modulepreload" href="/long-press/assets/chunks/framework.Cp_of1Ge.js">
    <link rel="modulepreload" href="/long-press/assets/chunks/theme.hH2tFlJ7.js">
    <link rel="modulepreload" href="/long-press/assets/chunks/PageInfo.vue_vue_type_script_setup_true_lang.9LRWY4ho.js">
    <link rel="modulepreload" href="/long-press/assets/chunks/dayjs.min.BrPrGVY0.js">
    <link rel="modulepreload" href="/long-press/assets/react_Antd使用踩坑经验汇总_Form表单.md.DGT8jzsZ.lean.js">
    <link rel="icon" type="image/svg+xml" href="logo.ico">
    <meta name="author" content="龙陌">
    <meta name="referrer" content="no-referrer">
    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
  </head>
  <body>
    <div id="app"><div class="Layout" data-v-4c760b95><!--[--><!--]--><!--[--><span tabindex="-1" data-v-16c53dd7></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-16c53dd7> Skip to content </a><!--]--><!----><header class="VPNav" data-v-4c760b95 data-v-0a463f3f><div class="VPNavBar has-sidebar top" data-v-0a463f3f data-v-460dba10><div class="wrapper" data-v-460dba10><div class="container" data-v-460dba10><div class="title" data-v-460dba10><div class="VPNavBarTitle has-sidebar" data-v-460dba10 data-v-ef777607><a class="title" href="/long-press/" data-v-ef777607><!--[--><!--]--><!--[--><img class="VPImage logo" src="/long-press/logo.ico" alt data-v-9cb742f0><!--]--><span data-v-ef777607>龙陌的博客</span><!--[--><!--]--></a></div></div><div class="content" data-v-460dba10><div class="content-body" data-v-460dba10><!--[--><!--]--><div class="VPNavBarSearch search" data-v-460dba10><!----><div id="docsearch"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><span class="DocSearch-Button-Key">Meta</span><span class="DocSearch-Button-Key">K</span></span></button></div></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-460dba10 data-v-b298d4fd><span id="main-nav-aria-label" class="visually-hidden" data-v-b298d4fd>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/long-press/" tabindex="0" data-v-b298d4fd data-v-5d92c3a7><!--[--><span data-v-5d92c3a7>💻 首页</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/long-press/guide/" tabindex="0" data-v-b298d4fd data-v-5d92c3a7><!--[--><span data-v-5d92c3a7>💡 指南</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/long-press/tools/" tabindex="0" data-v-b298d4fd data-v-5d92c3a7><!--[--><span data-v-5d92c3a7>🔧 编程工具</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/long-press/utils/" tabindex="0" data-v-b298d4fd data-v-5d92c3a7><!--[--><span data-v-5d92c3a7>🔧 常用工具类</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/long-press/standard/" tabindex="0" data-v-b298d4fd data-v-5d92c3a7><!--[--><span data-v-5d92c3a7>📋 前端规范</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/long-press/react/React实战,设计模式与最佳实践/" tabindex="0" data-v-b298d4fd data-v-5d92c3a7><!--[--><span data-v-5d92c3a7>⭐ React</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/long-press/typescript/" tabindex="0" data-v-b298d4fd data-v-5d92c3a7><!--[--><span data-v-5d92c3a7>⭐ TypeScript</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/long-press/css3/" tabindex="0" data-v-b298d4fd data-v-5d92c3a7><!--[--><span data-v-5d92c3a7>⭐ Css3</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/long-press/electron/" tabindex="0" data-v-b298d4fd data-v-5d92c3a7><!--[--><span data-v-5d92c3a7>⭐ Electron</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/long-press/linux/linux%E5%B8%B8%E7%94%A8%E5%91%BD%E4%BB%A4" tabindex="0" data-v-b298d4fd data-v-5d92c3a7><!--[--><span data-v-5d92c3a7>⭐ Linux</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-460dba10 data-v-815abbf3><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-815abbf3 data-v-34066301 data-v-b6ab5a8a><span class="check" data-v-b6ab5a8a><span class="icon" data-v-b6ab5a8a><!--[--><span class="vpi-sun sun" data-v-34066301></span><span class="vpi-moon moon" data-v-34066301></span><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-460dba10 data-v-a0947e71 data-v-2fe70121><!--[--><a class="VPSocialLink no-icon" href="https://vitepress.vuejs.org/guide/getting-started" aria-label="github" target="_blank" rel="noopener" data-v-2fe70121 data-v-39684c0a><span class="vpi-social-github" /></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/248956095" aria-label target="_blank" rel="noopener" data-v-2fe70121 data-v-39684c0a><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
  </svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-460dba10 data-v-b81df352 data-v-603fa601><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-603fa601><span class="vpi-more-horizontal icon" data-v-603fa601></span></button><div class="menu" data-v-603fa601><div class="VPMenu" data-v-603fa601 data-v-61aada2f><!----><!--[--><!--[--><!----><div class="group" data-v-b81df352><div class="item appearance" data-v-b81df352><p class="label" data-v-b81df352>外观</p><div class="appearance-action" data-v-b81df352><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-b81df352 data-v-34066301 data-v-b6ab5a8a><span class="check" data-v-b6ab5a8a><span class="icon" data-v-b6ab5a8a><!--[--><span class="vpi-sun sun" data-v-34066301></span><span class="vpi-moon moon" data-v-34066301></span><!--]--></span></span></button></div></div></div><div class="group" data-v-b81df352><div class="item social-links" data-v-b81df352><div class="VPSocialLinks social-links-list" data-v-b81df352 data-v-2fe70121><!--[--><a class="VPSocialLink no-icon" href="https://vitepress.vuejs.org/guide/getting-started" aria-label="github" target="_blank" rel="noopener" data-v-2fe70121 data-v-39684c0a><span class="vpi-social-github" /></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/248956095" aria-label target="_blank" rel="noopener" data-v-2fe70121 data-v-39684c0a><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
  </svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-460dba10 data-v-156ee799><span class="container" data-v-156ee799><span class="top" data-v-156ee799></span><span class="middle" data-v-156ee799></span><span class="bottom" data-v-156ee799></span></span></button></div></div></div></div><div class="divider" data-v-460dba10><div class="divider-line" data-v-460dba10></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-4c760b95 data-v-bc5dff2d><div class="container" data-v-bc5dff2d><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-bc5dff2d><span class="vpi-align-left menu-icon" data-v-bc5dff2d></span><span class="menu-text" data-v-bc5dff2d>归档</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-bc5dff2d data-v-fe28bfa1><button data-v-fe28bfa1>返回顶部</button><!----></div></div></div><aside class="VPSidebar" data-v-4c760b95 data-v-e1756f1c><div class="curtain" data-v-e1756f1c></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-e1756f1c><span class="visually-hidden" id="sidebar-aria-label" data-v-e1756f1c> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-e1756f1c><section class="VPSidebarItem level-0 collapsible" data-v-e1756f1c data-v-b147bcc8><div class="item" role="button" tabindex="0" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><h2 class="text" data-v-b147bcc8>React基础</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b147bcc8><span class="vpi-chevron-right caret-icon" data-v-b147bcc8></span></div></div><div class="items" data-v-b147bcc8><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/react/Redux" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>Redux</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/react/React%20Hooks" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>React Hooks</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/react/ReactRouter" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>ReactRouter</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-e1756f1c><section class="VPSidebarItem level-0 has-active" data-v-e1756f1c data-v-b147bcc8><div class="item" role="button" tabindex="0" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><h2 class="text" data-v-b147bcc8>Antd使用踩坑经验汇总</h2><!----></div><div class="items" data-v-b147bcc8><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/react/Antd%E4%BD%BF%E7%94%A8%E8%B8%A9%E5%9D%91%E7%BB%8F%E9%AA%8C%E6%B1%87%E6%80%BB/Form%E8%A1%A8%E5%8D%95" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>Form表单</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/react/Antd%E4%BD%BF%E7%94%A8%E8%B8%A9%E5%9D%91%E7%BB%8F%E9%AA%8C%E6%B1%87%E6%80%BB/AntdTable%E8%A1%A8%E6%A0%BC" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>AntdTable表格</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/react/Antd%E4%BD%BF%E7%94%A8%E8%B8%A9%E5%9D%91%E7%BB%8F%E9%AA%8C%E6%B1%87%E6%80%BB/Tree%E7%BB%84%E4%BB%B6" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>Tree树组件</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/react/Antd%E4%BD%BF%E7%94%A8%E8%B8%A9%E5%9D%91%E7%BB%8F%E9%AA%8C%E6%B1%87%E6%80%BB/%E5%85%B6%E4%BB%96%E5%BC%B9%E5%87%BA%E5%B1%82" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>其他弹出层</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/react/Antd%E4%BD%BF%E7%94%A8%E8%B8%A9%E5%9D%91%E7%BB%8F%E9%AA%8C%E6%B1%87%E6%80%BB/Tabs%E9%80%89%E9%A1%B9%E5%8D%A1" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>Tabs选项卡</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/react/Antd%E4%BD%BF%E7%94%A8%E8%B8%A9%E5%9D%91%E7%BB%8F%E9%AA%8C%E6%B1%87%E6%80%BB/Menu%E8%8F%9C%E5%8D%95" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>Menu菜单</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/react/Antd%E4%BD%BF%E7%94%A8%E8%B8%A9%E5%9D%91%E7%BB%8F%E9%AA%8C%E6%B1%87%E6%80%BB/Menu%E8%8F%9C%E5%8D%95" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>Menu菜单</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-e1756f1c><section class="VPSidebarItem level-0" data-v-e1756f1c data-v-b147bcc8><div class="item" role="button" tabindex="0" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><h2 class="text" data-v-b147bcc8>CSS解决方案</h2><!----></div><div class="items" data-v-b147bcc8><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/react/CSS%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88/CSS_Module" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>CSS Module</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-e1756f1c><section class="VPSidebarItem level-0" data-v-e1756f1c data-v-b147bcc8><!----><div class="items" data-v-b147bcc8><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/react/aHooks/" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>ahooks</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-e1756f1c><section class="VPSidebarItem level-0" data-v-e1756f1c data-v-b147bcc8><div class="item" role="button" tabindex="0" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><h2 class="text" data-v-b147bcc8>自定义Hooks</h2><!----></div><div class="items" data-v-b147bcc8><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/react/%E8%87%AA%E5%AE%9A%E4%B9%89Hooks/useRouter" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>useRouter</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/react/%E8%87%AA%E5%AE%9A%E4%B9%89Hooks/useLoadScript" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>useLoadScript</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/react/%E8%87%AA%E5%AE%9A%E4%B9%89Hooks/useInputHistory" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>useInputHistory</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/react/%E8%87%AA%E5%AE%9A%E4%B9%89Hooks/useSetParticalState" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>useSetParticalState</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/react/%E8%87%AA%E5%AE%9A%E4%B9%89Hooks/useFormModal" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>useFormModal</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/react/%E8%87%AA%E5%AE%9A%E4%B9%89Hooks/useCopy" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>useCopy</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/react/%E8%87%AA%E5%AE%9A%E4%B9%89Hooks/useIntersection" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>useIntersection</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/react/%E8%87%AA%E5%AE%9A%E4%B9%89Hooks/useModal" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>useModal</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/react/%E8%87%AA%E5%AE%9A%E4%B9%89Hooks/useInterval" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>useInterval</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/react/%E8%87%AA%E5%AE%9A%E4%B9%89Hooks/useModal" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>useModal</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/react/%E8%87%AA%E5%AE%9A%E4%B9%89Hooks/useModal" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>useModal</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-e1756f1c><section class="VPSidebarItem level-0 collapsible collapsed" data-v-e1756f1c data-v-b147bcc8><div class="item" role="button" tabindex="0" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><h2 class="text" data-v-b147bcc8>React实战：设计模式和最佳实践</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b147bcc8><span class="vpi-chevron-right caret-icon" data-v-b147bcc8></span></div></div><div class="items" data-v-b147bcc8><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/react/React%E5%AE%9E%E6%88%98,%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F%E4%B8%8E%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5/React%E7%9A%84%E8%AE%BE%E8%AE%A1%E6%80%9D%E6%83%B3" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>React的设计思想</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/react/React%E5%AE%9E%E6%88%98,%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F%E4%B8%8E%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5/%E7%BB%84%E4%BB%B6%E5%AE%9E%E8%B7%B5%EF%BC%881%EF%BC%89%EF%BC%9A%E5%A6%82%E4%BD%95%E5%AE%9A%E4%B9%89%E6%B8%85%E6%99%B0%E5%8F%AF%E7%BB%B4%E6%8A%A4%E7%9A%84%E6%8E%A5%E5%8F%A3" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>组件实践（1）：如何定义清晰可维护的接口</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/react/React%E5%AE%9E%E6%88%98,%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F%E4%B8%8E%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5/%E7%BB%84%E4%BB%B6%E5%AE%9E%E8%B7%B5%EF%BC%882%EF%BC%89%EF%BC%9A%E7%BB%84%E4%BB%B6%E7%9A%84%E5%86%85%E9%83%A8%E5%AE%9E%E7%8E%B0" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>组件实践（2）：组件的内部实现</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/react/React%E5%AE%9E%E6%88%98,%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F%E4%B8%8E%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5/%E7%BB%84%E4%BB%B6%E5%AE%9E%E8%B7%B5%EF%BC%883%EF%BC%89%EF%BC%9A%E7%BB%84%E4%BB%B6%E5%8C%96%E6%A0%B7%E5%BC%8F" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>组件实践（3）：组件化样式</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/react/React%E5%AE%9E%E6%88%98,%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F%E4%B8%8E%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5/%E7%BB%84%E4%BB%B6%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F%EF%BC%881%EF%BC%89%EF%BC%9A%E8%81%AA%E6%98%8E%E7%BB%84%E4%BB%B6%E5%92%8C%E5%82%BB%E7%93%9C%E7%BB%84%E4%BB%B6" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>组件设计模式（1）：聪明组件和傻瓜组件</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/react/React%E5%AE%9E%E6%88%98,%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F%E4%B8%8E%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5/%E7%BB%84%E4%BB%B6%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F%EF%BC%882%EF%BC%89%EF%BC%9A%E9%AB%98%E9%98%B6%E7%BB%84%E4%BB%B6" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>组件设计模式（2）：高阶组件</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/react/React%E5%AE%9E%E6%88%98,%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F%E4%B8%8E%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5/%E7%BB%84%E4%BB%B6%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F%EF%BC%883%EF%BC%89%EF%BC%9Arender%20props%20%E6%A8%A1%E5%BC%8F" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>组件设计模式（3）：render props 模式</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/react/React%E5%AE%9E%E6%88%98,%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F%E4%B8%8E%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5/%E7%BB%84%E4%BB%B6%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F%EF%BC%884%EF%BC%89%EF%BC%9A%E6%8F%90%E4%BE%9B%E8%80%85%E6%A8%A1%E5%BC%8F" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>组件设计模式（4）：提供者模式</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/react/React%E5%AE%9E%E6%88%98,%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F%E4%B8%8E%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5/%E7%BB%84%E4%BB%B6%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F%EF%BC%885%EF%BC%89%EF%BC%9A%E7%BB%84%E5%90%88%E7%BB%84%E4%BB%B6" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>组件设计模式（5）：组合组件</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/react/React%E5%AE%9E%E6%88%98,%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F%E4%B8%8E%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5/React%20%E5%8D%95%E5%85%83%E6%B5%8B%E8%AF%95" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>React 单元测试</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/react/React%E5%AE%9E%E6%88%98,%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F%E4%B8%8E%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5/React%20%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86%EF%BC%881%EF%BC%89%EF%BC%9A%E7%BB%84%E4%BB%B6%E7%8A%B6%E6%80%81" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>React 状态管理（1）：组件状态</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/react/React%E5%AE%9E%E6%88%98,%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F%E4%B8%8E%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5/React%20%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86%EF%BC%882%EF%BC%89%EF%BC%9ARedux%20%E4%BD%BF%E7%94%A8%E6%A8%A1%E5%BC%8F" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>React 状态管理（2）：Redux 使用模式</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/react/React%E5%AE%9E%E6%88%98,%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F%E4%B8%8E%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5/React%20%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86%EF%BC%883%EF%BC%89%EF%BC%9AMobx%20%E4%BD%BF%E7%94%A8%E6%A8%A1%E5%BC%8F" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>React 状态管理（3）：Mobx 使用模式</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/react/React%E5%AE%9E%E6%88%98,%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F%E4%B8%8E%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5/React%20%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86%EF%BC%884%EF%BC%89%EF%BC%9A%E4%B8%8D%E5%90%8C%E6%96%B9%E5%BC%8F%E5%AF%B9%E6%AF%94" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>React 状态管理（4）：不同方式对比</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/react/React%E5%AE%9E%E6%88%98,%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F%E4%B8%8E%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5/%E8%B7%AF%E7%94%B1%E7%9A%84%E9%AD%94%E6%B3%95%EF%BC%9AReact%20Router" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>路由的魔法：React Router</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/react/React%E5%AE%9E%E6%88%98,%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F%E4%B8%8E%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5/%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%AB%AF%E6%B8%B2%E6%9F%93%EF%BC%881%EF%BC%89%EF%BC%9A%E5%9F%BA%E6%9C%AC%E5%A5%97%E8%B7%AF" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>服务器端渲染（1）：基本套路</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/react/React%E5%AE%9E%E6%88%98,%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F%E4%B8%8E%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5/%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%AB%AF%E6%B8%B2%E6%9F%93%EF%BC%882%EF%BC%89%E7%90%86%E8%A7%A3NextJS" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>服务器端渲染（2):理解Nextjs</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/react/React%E5%AE%9E%E6%88%98,%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F%E4%B8%8E%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5/React%20%E7%9A%84%E6%9C%AA%E6%9D%A5%EF%BC%881%EF%BC%89%EF%BC%9A%20%E6%8B%A5%E6%8A%B1%E5%BC%82%E6%AD%A5%E6%B8%B2%E6%9F%93" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>React 的未来（1）： 拥抱异步渲染</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/react/React%E5%AE%9E%E6%88%98,%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F%E4%B8%8E%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5/React%20%E7%9A%84%E6%9C%AA%E6%9D%A5%EF%BC%882%EF%BC%89%EF%BC%9ASuspense%20%E5%B8%A6%E6%9D%A5%E7%9A%84%E5%BC%82%E6%AD%A5%E6%93%8D%E4%BD%9C%E9%9D%A9%E5%91%BD" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>React 的未来（2）：Suspense 带来的异步操作革命</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/react/React%E5%AE%9E%E6%88%98,%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F%E4%B8%8E%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5/React%20%E7%9A%84%E6%9C%AA%E6%9D%A5%EF%BC%883%EF%BC%89%EF%BC%9A%E5%87%BD%E6%95%B0%E5%8C%96%E7%9A%84%20Hooks" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>React 的未来（3）：函数化的 Hooks</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-e1756f1c><div class="VPSidebarItem level-0 collapsible" data-v-e1756f1c data-v-b147bcc8><div class="item" role="button" tabindex="0" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><p class="text" data-v-b147bcc8>React搞定复杂项目状态管理</p><!----></div><!----></div></div><div class="group" data-v-e1756f1c><div class="VPSidebarItem level-0 collapsible" data-v-e1756f1c data-v-b147bcc8><div class="item" role="button" tabindex="0" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><p class="text" data-v-b147bcc8>React后台管理系统项目实战</p><!----></div><!----></div></div><div class="group" data-v-e1756f1c><div class="VPSidebarItem level-0 collapsible" data-v-e1756f1c data-v-b147bcc8><div class="item" role="button" tabindex="0" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><p class="text" data-v-b147bcc8>慕课网最新React技术栈，实战复杂低代码项目-仿问卷星</p><!----></div><!----></div></div><div class="group" data-v-e1756f1c><section class="VPSidebarItem level-0 collapsible" data-v-e1756f1c data-v-b147bcc8><div class="item" role="button" tabindex="0" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><h2 class="text" data-v-b147bcc8>React状态管理</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b147bcc8><span class="vpi-chevron-right caret-icon" data-v-b147bcc8></span></div></div><div class="items" data-v-b147bcc8><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/react/%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86/zustand" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>zustand</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/react/%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86/zustand%E7%BF%BB%E8%AF%91%E6%96%87%E6%A1%A3" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>zustand翻译文档</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-e1756f1c><section class="VPSidebarItem level-0" data-v-e1756f1c data-v-b147bcc8><div class="item" role="button" tabindex="0" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><h2 class="text" data-v-b147bcc8>开发一个组件库</h2><!----></div><div class="items" data-v-b147bcc8><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/react/%E5%BC%80%E5%8F%91%E4%B8%80%E4%B8%AA%E7%BB%84%E4%BB%B6%E5%BA%93/%E5%A6%82%E4%BD%95%E5%AE%8C%E5%96%84%E7%BB%84%E4%BB%B6%E5%8D%95%E6%B5%8B" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>如何完善组件单测</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/react/%E5%BC%80%E5%8F%91%E4%B8%80%E4%B8%AA%E7%BB%84%E4%BB%B6%E5%BA%93/handlebars%E6%A8%A1%E6%9D%BF" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>handlebars模板</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-e1756f1c><section class="VPSidebarItem level-0" data-v-e1756f1c data-v-b147bcc8><div class="item" role="button" tabindex="0" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><h2 class="text" data-v-b147bcc8>React好用的插件</h2><!----></div><div class="items" data-v-b147bcc8><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/react/React%E5%A5%BD%E7%94%A8%E7%9A%84%E6%8F%92%E4%BB%B6/js-pinyin" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>js-pinyin</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/react/React%E5%A5%BD%E7%94%A8%E7%9A%84%E6%8F%92%E4%BB%B6/jsbarcode" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>jsbarcode</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/react/React%E5%A5%BD%E7%94%A8%E7%9A%84%E6%8F%92%E4%BB%B6/react-jsx-parse" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>react-jsx-parse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/react/React%E5%A5%BD%E7%94%A8%E7%9A%84%E6%8F%92%E4%BB%B6/react-load-script" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>react-load-script</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/react/React%E5%A5%BD%E7%94%A8%E7%9A%84%E6%8F%92%E4%BB%B6/react-to-print" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>react-to-print</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/react/React%E5%A5%BD%E7%94%A8%E7%9A%84%E6%8F%92%E4%BB%B6/react-viewer" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>react-viewer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/react/React%E5%A5%BD%E7%94%A8%E7%9A%84%E6%8F%92%E4%BB%B6/react-hook-form" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>react-hook-form</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/react/React%E5%A5%BD%E7%94%A8%E7%9A%84%E6%8F%92%E4%BB%B6/react-window-infinite-loader" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>react-window-infinite-loader</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/react/React%E5%A5%BD%E7%94%A8%E7%9A%84%E6%8F%92%E4%BB%B6/react-window-infinite-loader" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>react-window-infinite-loader</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/react/React%E5%A5%BD%E7%94%A8%E7%9A%84%E6%8F%92%E4%BB%B6/react-window-infinite-loader" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>react-window-infinite-loader</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-4c760b95 data-v-308553a0><div class="VPDoc has-sidebar has-aside" data-v-308553a0 data-v-e512d8d8><!--[--><!--]--><div class="container" data-v-e512d8d8><div class="aside" data-v-e512d8d8><div class="aside-curtain" data-v-e512d8d8></div><div class="aside-container" data-v-e512d8d8><div class="aside-content" data-v-e512d8d8><div class="VPDocAside" data-v-e512d8d8 data-v-bca3b04c><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-bca3b04c data-v-ff0b6666><div class="content" data-v-ff0b6666><div class="outline-marker" data-v-ff0b6666></div><div class="outline-title" role="heading" aria-level="2" data-v-ff0b6666>本页目录</div><nav aria-labelledby="doc-outline-aria-label" data-v-ff0b6666><span class="visually-hidden" id="doc-outline-aria-label" data-v-ff0b6666> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-ff0b6666 data-v-69d389fc><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-bca3b04c></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-e512d8d8><div class="content-container" data-v-e512d8d8><!--[--><!--]--><main class="main" data-v-e512d8d8><div style="position:relative;" class="vp-doc _long-press_react_Antd%E4%BD%BF%E7%94%A8%E8%B8%A9%E5%9D%91%E7%BB%8F%E9%AA%8C%E6%B1%87%E6%80%BB_Form%E8%A1%A8%E5%8D%95" data-v-e512d8d8><div><h1 id="form表单" tabindex="-1">Form表单 <a class="header-anchor" href="#form表单" aria-label="Permalink to &quot;Form表单&quot;">​</a></h1><div class="tip custom-block"><p class="custom-block-title">提示</p><p>被设置了 name 属性的 Form.Item 包装的控件，表单控件会自动添加 value（或 valuePropName 指定的其他属性） onChange（或 trigger 指定的其他属性），数据同步将被 Form 接管， 这会导致以下结果：</p><p>你不再需要也不应该用 onChange 来做数据收集同步（你可以使用 Form 的 onValuesChange），但还是可以继续监听 onChange 事件。</p><p>你不能用控件的 value 或 defaultValue 等属性来设置表单域的值，默认值可以用 Form 里的 initialValues 来设置。</p><p>注意 initialValues 不能被 setState 动态更新，你需要用 setFieldsValue 来更新。</p><p>你不应该用 setState，可以使用 form.setFieldsValue 来动态改变表单值。</p></div><h2 id="表单验证" tabindex="-1">表单验证 <a class="header-anchor" href="#表单验证" aria-label="Permalink to &quot;表单验证&quot;">​</a></h2><p>相较vue中表单验证，antd中对输入框的验证全部放到了Form.Item中。 同时触发的事件诸如onBlur，onChange Form.Item中，（通过validateTrigger来指定)</p><p>对于自定义校验validator函数：它会在每次事件触发的时候执行，这样就会出现如果设置了</p><div class="language-text vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">text</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>rules = {</span></span>
<span class="line"><span>	[</span></span>
<span class="line"><span>		{</span></span>
<span class="line"><span>			required: true,</span></span>
<span class="line"><span>			message: &#39;手机号不能为空&#39;</span></span>
<span class="line"><span>		},</span></span>
<span class="line"><span>		{</span></span>
<span class="line"><span>			required: true,</span></span>
<span class="line"><span>				validator:(rule, value) =&gt; {</span></span>
<span class="line"><span>				if (value) {</span></span>
<span class="line"><span>					let reg = /^1(3|4|5|6|7|8|9)\d{9}$/g;</span></span>
<span class="line"><span>					if (reg.test(value)) {</span></span>
<span class="line"><span>						return Promise.resolve()</span></span>
<span class="line"><span>					} else {</span></span>
<span class="line"><span>						return Promise.reject(&#39;手机号格式错误&#39;)</span></span>
<span class="line"><span>					}</span></span>
<span class="line"><span>				} else {</span></span>
<span class="line"><span>					return Promise.reject(&#39;请输入正确的手机号&#39;)</span></span>
<span class="line"><span>				}</span></span>
<span class="line"><span>			}</span></span>
<span class="line"><span>		}</span></span>
<span class="line"><span>	]</span></span>
<span class="line"><span>}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br></div></div><p>两个验证规则。原本的目的是在没有输入任何值时只提示“手机号不能为空”，结果同时出现“请输入正确的手机号”“手机号格式错误”两个报错。 也就是validator优先级最高。所以解决办法有两种： （1）所有的验证放在validator中包括为空的情况 （2）不要validator函数，而是把为空和验证规则拆开，如下：</p><div class="language-jsx vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">jsx</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Form.Item</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">	name</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;account&quot;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">	validateTrigger</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;onBlur&quot;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">	rules</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span></span>
<span class="line"><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">		[</span></span>
<span class="line"><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">			{</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">				required</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#0000FF;--shiki-dark:#D19A66;"> true</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">,</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">				message</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &#39;手机号不能为空&#39;</span></span>
<span class="line"><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">			},</span></span>
<span class="line"><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">			{</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">				pattern</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#811F3F;--shiki-dark:#E06C75;"> /</span><span style="--shiki-light:#EE0000;--shiki-dark:#C678DD;">^</span><span style="--shiki-light:#811F3F;--shiki-dark:#E06C75;">1</span><span style="--shiki-light:#D16969;--shiki-dark:#E06C75;">(</span><span style="--shiki-light:#811F3F;--shiki-dark:#E06C75;">3</span><span style="--shiki-light:#EE0000;--shiki-dark:#ABB2BF;">|</span><span style="--shiki-light:#811F3F;--shiki-dark:#E06C75;">4</span><span style="--shiki-light:#EE0000;--shiki-dark:#ABB2BF;">|</span><span style="--shiki-light:#811F3F;--shiki-dark:#E06C75;">5</span><span style="--shiki-light:#EE0000;--shiki-dark:#ABB2BF;">|</span><span style="--shiki-light:#811F3F;--shiki-dark:#E06C75;">6</span><span style="--shiki-light:#EE0000;--shiki-dark:#ABB2BF;">|</span><span style="--shiki-light:#811F3F;--shiki-dark:#E06C75;">7</span><span style="--shiki-light:#EE0000;--shiki-dark:#ABB2BF;">|</span><span style="--shiki-light:#811F3F;--shiki-dark:#E06C75;">8</span><span style="--shiki-light:#EE0000;--shiki-dark:#ABB2BF;">|</span><span style="--shiki-light:#811F3F;--shiki-dark:#E06C75;">9</span><span style="--shiki-light:#D16969;--shiki-dark:#E06C75;">)</span><span style="--shiki-light:#811F3F;--shiki-dark:#E06C75;">\d</span><span style="--shiki-light:#000000;--shiki-dark:#D19A66;">{9}</span><span style="--shiki-light:#EE0000;--shiki-dark:#C678DD;">$</span><span style="--shiki-light:#811F3F;--shiki-dark:#E06C75;">/</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">g</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">,</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">				message</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &quot;请输入正确的手机号&quot;</span></span>
<span class="line"><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">			},</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">		]</span></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">	}</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">	&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Input</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> size</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;large&quot;</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> max</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">11</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> value</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">account</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> allowClear</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> prefix</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">IconFont</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> type</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;icon-zhanghao&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;"> /&gt;</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;"> /&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Form.Item</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div><h4 id="表单的自定义验证的两种方式" tabindex="-1">表单的自定义验证的两种方式: <a class="header-anchor" href="#表单的自定义验证的两种方式" aria-label="Permalink to &quot;表单的自定义验证的两种方式:&quot;">​</a></h4><p>(1) rules里直接通过数组配置规则，如下：</p><div class="language-jsx vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">jsx</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;"> &lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Form.Item</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">	name</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;account&quot;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">	validateTrigger</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;onBlur&quot;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">	rules</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span></span>
<span class="line"><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">		[</span></span>
<span class="line"><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">			{</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">				required</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#0000FF;--shiki-dark:#D19A66;"> true</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">,</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">				message</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &#39;手机号不能为空&#39;</span></span>
<span class="line"><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">			},</span></span>
<span class="line"><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">			{</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">				pattern</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#811F3F;--shiki-dark:#E06C75;"> /</span><span style="--shiki-light:#EE0000;--shiki-dark:#C678DD;">^</span><span style="--shiki-light:#811F3F;--shiki-dark:#E06C75;">1</span><span style="--shiki-light:#D16969;--shiki-dark:#E06C75;">(</span><span style="--shiki-light:#811F3F;--shiki-dark:#E06C75;">3</span><span style="--shiki-light:#EE0000;--shiki-dark:#ABB2BF;">|</span><span style="--shiki-light:#811F3F;--shiki-dark:#E06C75;">4</span><span style="--shiki-light:#EE0000;--shiki-dark:#ABB2BF;">|</span><span style="--shiki-light:#811F3F;--shiki-dark:#E06C75;">5</span><span style="--shiki-light:#EE0000;--shiki-dark:#ABB2BF;">|</span><span style="--shiki-light:#811F3F;--shiki-dark:#E06C75;">6</span><span style="--shiki-light:#EE0000;--shiki-dark:#ABB2BF;">|</span><span style="--shiki-light:#811F3F;--shiki-dark:#E06C75;">7</span><span style="--shiki-light:#EE0000;--shiki-dark:#ABB2BF;">|</span><span style="--shiki-light:#811F3F;--shiki-dark:#E06C75;">8</span><span style="--shiki-light:#EE0000;--shiki-dark:#ABB2BF;">|</span><span style="--shiki-light:#811F3F;--shiki-dark:#E06C75;">9</span><span style="--shiki-light:#D16969;--shiki-dark:#E06C75;">)</span><span style="--shiki-light:#811F3F;--shiki-dark:#E06C75;">\d</span><span style="--shiki-light:#000000;--shiki-dark:#D19A66;">{9}</span><span style="--shiki-light:#EE0000;--shiki-dark:#C678DD;">$</span><span style="--shiki-light:#811F3F;--shiki-dark:#E06C75;">/</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">g</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">,</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">				message</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &quot;请输入正确的手机号&quot;</span></span>
<span class="line"><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">			},</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">		]</span></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">	}</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">	&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Input</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> size</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;large&quot;</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> max</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">11</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> value</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">account</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> allowClear</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> prefix</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">IconFont</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> type</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;icon-zhanghao&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;"> /&gt;</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;"> /&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Form.Item</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div><h4 id="_2-自定义验证函数validator" tabindex="-1">（2） 自定义验证函数validator <a class="header-anchor" href="#_2-自定义验证函数validator" aria-label="Permalink to &quot;（2） 自定义验证函数validator&quot;">​</a></h4><p>注意返回的是一个promise. resove或者reject以后的值：验证通过直接通过promise.resolve()值出来。 验证不通过则需要通过promise.reject()抛出错误原因</p><div class="language-jsx vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">jsx</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">  const</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;"> validatorCatagory</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> =</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> (</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">rule</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">value</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">type</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">) </span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">=&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;">	console</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">log</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;value&quot;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">value</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">)</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;">	console</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">log</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;type&quot;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">type</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">)</span></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">	let</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;"> str</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> =</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;"> type</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> ===</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &quot;cassify&quot;</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> ?</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &quot;类目&quot;</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> :</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &quot;类目编号&quot;</span></span>
<span class="line"><span style="--shiki-light:#AF00DB;--shiki-dark:#C678DD;">	if</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> (</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">!</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">value</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">) {</span></span>
<span class="line"><span style="--shiki-light:#AF00DB;--shiki-dark:#C678DD;">		return</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;"> Promise</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">reject</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">`</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">${</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">str</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">不能为空`</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">)</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">	} </span><span style="--shiki-light:#AF00DB;--shiki-dark:#C678DD;">else</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;">		console</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">log</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;value:&quot;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">value</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">)</span></span>
<span class="line"><span style="--shiki-light:#AF00DB;--shiki-dark:#C678DD;">		if</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> ((</span><span style="--shiki-light:#811F3F;--shiki-dark:#E06C75;">/</span><span style="--shiki-light:#D16969;--shiki-dark:#D19A66;">[</span><span style="--shiki-light:#811F3F;--shiki-dark:#D19A66;">a-zA-Z0-9</span><span style="--shiki-light:#D16969;--shiki-dark:#D19A66;">]</span><span style="--shiki-light:#811F3F;--shiki-dark:#E06C75;">/</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">test</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">value</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">)) </span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">&amp;&amp;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> (</span><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;">value</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">length</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> &gt;</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 0</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> &amp;&amp;</span><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;"> value</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">length</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> &lt;=</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 60</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">)) {</span></span>
<span class="line"><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">			setCatagoryNum</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">value</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">)</span></span>
<span class="line"><span style="--shiki-light:#AF00DB;--shiki-dark:#C678DD;">			return</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;"> Promise</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">resolve</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">value</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">)</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">		} </span><span style="--shiki-light:#AF00DB;--shiki-dark:#C678DD;">else</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#AF00DB;--shiki-dark:#C678DD;">			return</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;"> Promise</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">reject</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">`</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">${</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">str</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">不能含有特殊字符并且不能大于60个字符`</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">)</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">		}</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">	}</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Form.Item</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">	label</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;类目名&quot;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">	name</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;type&quot;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">	validateTrigger</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&#39;onBlur&#39;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">	required</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">	rules</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">[</span></span>
<span class="line"><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">		{ </span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">validator</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;"> (</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">rule</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">value</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">,) </span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">=&gt;</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;"> validatorCatagory</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">rule</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">value</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;cassify&quot;</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">) },</span></span>
<span class="line"><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">	]</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">	&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Input</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> style</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">{ </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">width</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 320</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;"> }</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> value</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">catagoryName</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> onChange</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">e</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;"> =&gt;</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;"> updataName</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">e</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">)</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;"> /&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Form.Item</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br></div></div><h2 id="表单提交" tabindex="-1">表单提交 <a class="header-anchor" href="#表单提交" aria-label="Permalink to &quot;表单提交&quot;">​</a></h2><h3 id="按钮提交" tabindex="-1">按钮提交 <a class="header-anchor" href="#按钮提交" aria-label="Permalink to &quot;按钮提交&quot;">​</a></h3><p>有时候我们表单提交不一定是在表单的submit按钮下。 可能是在其他区域点击触发表单的整体验证。 可以通过 两种方式来实现：</p><h4 id="方式一-直接通过useform获取form的引用" tabindex="-1">方式一：直接通过useForm获取form的引用 <a class="header-anchor" href="#方式一-直接通过useform获取form的引用" aria-label="Permalink to &quot;方式一：直接通过useForm获取form的引用&quot;">​</a></h4><div class="language-jsx vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">jsx</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#AF00DB;--shiki-dark:#C678DD;">import</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> { </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">Modal</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">Form</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, } </span><span style="--shiki-light:#AF00DB;--shiki-dark:#C678DD;">from</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &#39;antd&#39;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">const</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> [</span><span style="--shiki-light:#0070C1;--shiki-dark:#E5C07B;">form</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">] </span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;"> Form</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">useForm</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">()</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">function</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;"> ComName</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">() {</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">	cosnt</span></span>
<span class="line"><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">	validata</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> =</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> () </span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">=&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;">		form</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">setFieldsValue</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">({</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">			catagoryName</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;"> data</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">name</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">,</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">		})</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">	}</span></span>
<span class="line"><span style="--shiki-light:#AF00DB;--shiki-dark:#C678DD;">	return</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> (</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">		&lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">			&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Form</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">				labelCol</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">{ </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">span</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 6</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;"> }</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">				wrapperCol</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">{ </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">span</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 18</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;"> }</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">				form</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">form</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">				initialValues</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">formInitialValues</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">			&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">				&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Form.Item</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">					label</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;类目名&quot;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">					name</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;catagoryName&quot;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">					validateTrigger</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&#39;onBlur&#39;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">					required</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">				&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">					&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Input</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> style</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">{ </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">width</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 320</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;"> }</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> value</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">catagoryName</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;"> /&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">				&lt;/</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Form.Item</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">			&lt;/</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Form</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">			&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Button</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> onClick</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">validata</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">提交</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Button</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">		&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">	)</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br></div></div><h4 id="方式二-通过useref获取form的引用" tabindex="-1">方式二:通过useRef获取form的引用 <a class="header-anchor" href="#方式二-通过useref获取form的引用" aria-label="Permalink to &quot;方式二:通过useRef获取form的引用&quot;">​</a></h4><div class="language-jsx vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">jsx</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#AF00DB;--shiki-dark:#C678DD;">import</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> { </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">useRef</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">useEffect</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> } </span><span style="--shiki-light:#AF00DB;--shiki-dark:#C678DD;">from</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &#39;react&#39;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">function</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;"> EditCatagory</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">props</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">) {</span></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">	const</span><span style="--shiki-light:#0070C1;--shiki-dark:#E5C07B;"> fromRef</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> =</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;"> useRef</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">()</span></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">	const</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;"> submit</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> =</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> () </span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">=&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;">		fromRef</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;">current</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">validateFields</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">().</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">then</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">res</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;"> =&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">		}).</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">catch</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">_</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;"> =&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">		})</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">	}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#AF00DB;--shiki-dark:#C678DD;">	return</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> (</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">		&lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">			&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Form</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">				labelCol</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">{ </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">span</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 6</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;"> }</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">				wrapperCol</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">{ </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">span</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 18</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;"> }</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">				form</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">form</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">				ref</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">fromRef</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">				initialValues</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">formInitialValues</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">			&gt;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">				xxx...</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">			&lt;/</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Form</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">			&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Button</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> onClick</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">submit</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">提交</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Button</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">		&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">	)</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br></div></div><p>如果表单块之间没有强关联关系，可以拆分出来，分别校验，通过formRef取值，一起提交。</p><h3 id="数据处理" tabindex="-1">数据处理 <a class="header-anchor" href="#数据处理" aria-label="Permalink to &quot;数据处理&quot;">​</a></h3><p>用form 表单域获取数据时，如果表单提交的数据不需要全部传入后台，可以所需的数据解构出来，作为参数传入，以保证代码的高质量。 const { title = &#39;&#39;, source = &#39;&#39; ，labelName = &#39;&#39; } = values;</p><h2 id="设置表单默认值问题" tabindex="-1">设置表单默认值问题 <a class="header-anchor" href="#设置表单默认值问题" aria-label="Permalink to &quot;设置表单默认值问题&quot;">​</a></h2><p>如下图： <img src="/long-press/assets/d93c472b.FWwNf6F5.png" alt=""> 是否继承属性设置这个选项的默认值根据第一个红色框框的类目位置来决定。 它是一个数组。 如果数组长度&gt;1,则&quot;是否继承属性设置“ 的值 默认勾选为“自定义设置”，否则则勾选&quot;继承上级属性设置“。 因为有这层逻辑，所以一开始打算在useEffect里动态设置其defaultValue。开始的代码如下：</p><div class="language-jsx vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">jsx</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">function</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;"> CreateCatagory</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">props</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">) {</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">	const</span><span style="--shiki-light:#0070C1;--shiki-dark:#E5C07B;"> attrSettingDialogRef</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> =</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;"> useRef</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">()</span></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">	const</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> [</span><span style="--shiki-light:#0070C1;--shiki-dark:#E5C07B;">inheritPerporty</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#0070C1;--shiki-dark:#E5C07B;">setInheritPerporty</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">] </span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;"> useState</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">1</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">)</span></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">	const</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> [</span><span style="--shiki-light:#0070C1;--shiki-dark:#E5C07B;">setttingVal</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#0070C1;--shiki-dark:#E5C07B;">setSetttingVal</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">] </span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;"> useState</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">1</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">)</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">	const</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> [</span><span style="--shiki-light:#0070C1;--shiki-dark:#E5C07B;">form</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">] </span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;"> Form</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">useForm</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">()</span></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">	const</span><span style="--shiki-light:#0070C1;--shiki-dark:#E5C07B;"> formRef</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> =</span><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;"> React</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">createRef</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">();</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">	useEffect</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(() </span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">=&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">		let</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;"> val</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> =</span><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;"> catagoryPositions</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">length</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> &gt;</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 1</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> ?</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 2</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> :</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 1</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">		setInheritPerporty</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">val</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">)</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">	}, [])</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#AF00DB;--shiki-dark:#C678DD;">	return</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> (</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">		&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Form</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">			labelCol</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">{ </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">span</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 6</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;"> }</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">			wrapperCol</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">{ </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">span</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 18</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;"> }</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">			form</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">form</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">			ref</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">formRef</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">			initialValues</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">formInitialValues</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">		&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">			&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;"> Form.Item</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">				label</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;类目名&quot;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">				name</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;type&quot;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">				rules</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">[{ </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">required</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#0000FF;--shiki-dark:#D19A66;"> true</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">message</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &#39;所属类型不能为空&#39;</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;"> }]</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">				&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;"> Input</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">					style</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">{ </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">width</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 320</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;"> }</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">				/&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">			&lt;/</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Form.Item</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">			&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Form.Item</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> label</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;类目编号&quot;</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> name</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;code&quot;</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> rules</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">[{ </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">required</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#0000FF;--shiki-dark:#D19A66;"> true</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">message</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &#39;所属类型不能为空&#39;</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;"> }]</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">				&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Input</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> style</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">{ </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">width</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 320</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;"> }</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;"> /&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">			&lt;/</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Form.Item</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">			&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Form.Item</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> label</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;类目位置&quot;</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> name</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;position&quot;</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> rules</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">[{ </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">required</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#0000FF;--shiki-dark:#D19A66;"> true</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">message</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &#39;属性名不能为空&#39;</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;"> }]</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">				&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Input</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> style</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">{ </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">width</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 320</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;"> }</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> disabled</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> defaultValue</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;">catagoryPositions</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">join</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;/&quot;</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">)</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;"> /&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">			&lt;/</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Form.Item</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">			&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Form.Item</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> label</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;是否为末级类目&quot;</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> name</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;control&quot;</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> rules</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">[{ </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">required</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#0000FF;--shiki-dark:#D19A66;"> true</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">message</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &#39;属性控件不能为空&#39;</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;"> }]</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">				&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Radio.Group</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> onChange</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">onChange</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> value</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">isLastCatagoryVal</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">					&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Radio</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> value</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">1</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">是</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Radio</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">					&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Radio</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> value</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">2</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">否</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Radio</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">				&lt;/</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Radio.Group</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">			&lt;/</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Form.Item</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">			&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Form.Item</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> label</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;是否继承属性设置&quot;</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> name</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;inherit&quot;</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> rules</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">[{ </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">required</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#0000FF;--shiki-dark:#D19A66;"> true</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">message</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &#39;属性控件不能为空&#39;</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;"> }]</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">				&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Radio.Group</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> onChange</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">inheritPerportyFn</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> defaulteValue</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">inheritPerporty</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> value</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">setttingVal</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">					&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Radio</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> value</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">1</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">继承上级属性设置</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Radio</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">					&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Radio</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> value</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">2</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">自定义设置</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Radio</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">				&lt;/</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Radio.Group</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">			&lt;/</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Form.Item</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">		&lt;/</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Form</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">	)</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#AF00DB;--shiki-dark:#C678DD;">export</span><span style="--shiki-light:#AF00DB;--shiki-dark:#C678DD;"> default</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;"> CreateCatagory</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br></div></div><p>结果报错： <img src="/long-press/assets/c497c624.KEKVnwCw.png" alt=""> 顺着报错，initialValues看了下antd的官网有这样一段描述</p><ul><li>你不再需要也不应该用 onChange 来做数据收集同步（你可以使用 Form 的 onValuesChange），但还是可以继续监听 onChange 事件。</li><li>你不能用控件的 value 或 defaultValue 等属性来设置表单域的值，默认值可以用 Form 里的 initialValues 来设置。</li><li>注意initialValues 不能被 setState 动态更新，你需要用 setFieldsValue 来更新。</li><li>你不应该用 setState，可以使用 form.setFieldsValue 来动态改变表单值 所以做了一个尝试：代码改动如下：</li></ul><div class="language-jsx vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">jsx</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#AF00DB;--shiki-dark:#C678DD;">import</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> { </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">Modal</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">Form</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">Input</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">Button</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">Space</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">Select</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">Radio</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">Tabs</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">Checkbox</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> } </span><span style="--shiki-light:#AF00DB;--shiki-dark:#C678DD;">from</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &#39;antd&#39;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#AF00DB;--shiki-dark:#C678DD;">import</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> { </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">useState</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">useRef</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">useEffect</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> } </span><span style="--shiki-light:#AF00DB;--shiki-dark:#C678DD;">from</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &#39;react&#39;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#AF00DB;--shiki-dark:#C678DD;">import</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &quot;./index.less&quot;</span></span>
<span class="line"><span style="--shiki-light:#AF00DB;--shiki-dark:#C678DD;">import</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;"> Iconfont</span><span style="--shiki-light:#AF00DB;--shiki-dark:#C678DD;"> from</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &#39;components/iconfont&#39;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">const</span><span style="--shiki-light:#0070C1;--shiki-dark:#E5C07B;"> list</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> =</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> [</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">	{ </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">id</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &quot;0001&quot;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">name</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &quot;a属性&quot;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> },</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">	{ </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">id</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &quot;0002&quot;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">name</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &quot;b属性&quot;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> },</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">	{ </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">id</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &quot;0003&quot;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">name</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &quot;c属性&quot;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> },</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">	{ </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">id</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &quot;0004&quot;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">name</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &quot;d属性&quot;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> },</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">	{ </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">id</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &quot;0005&quot;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">name</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &quot;e属性&quot;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> },</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">	{ </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">id</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &quot;0006&quot;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">name</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &quot;f属性&quot;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> },</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">]</span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">// const catagoryPositions=[&quot;一级类目&quot;,&quot;二级类目&quot;].join(&quot;/&quot;)</span></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">const</span><span style="--shiki-light:#0070C1;--shiki-dark:#E5C07B;"> catagoryPositions</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> =</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> [</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;一级类目&quot;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;二级类目&quot;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">]</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">function</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;"> CreateCatagory</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">props</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">) {</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">	const</span><span style="--shiki-light:#0070C1;--shiki-dark:#E5C07B;"> attrSettingDialogRef</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> =</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;"> useRef</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">()</span></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">	const</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> [</span><span style="--shiki-light:#0070C1;--shiki-dark:#E5C07B;">isLastCatagoryVal</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#0070C1;--shiki-dark:#E5C07B;">setIsLastCatagoryVal</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">] </span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;"> useState</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">1</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">)</span></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">	const</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> [</span><span style="--shiki-light:#0070C1;--shiki-dark:#E5C07B;">setttingVal</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#0070C1;--shiki-dark:#E5C07B;">setSetttingVal</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">] </span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;"> useState</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">1</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">)</span></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">	const</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> [</span><span style="--shiki-light:#0070C1;--shiki-dark:#E5C07B;">isShowPeroptyRow</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#0070C1;--shiki-dark:#E5C07B;">setIsShowPeroptyRow</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">] </span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;"> useState</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#0000FF;--shiki-dark:#D19A66;">true</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">)</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">	const</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;"> formInitialValues</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> =</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> ({</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">		inherit</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 1</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">	})</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">	const</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> [</span><span style="--shiki-light:#0070C1;--shiki-dark:#E5C07B;">form</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">] </span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;"> Form</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">useForm</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">()</span></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">	const</span><span style="--shiki-light:#0070C1;--shiki-dark:#E5C07B;"> formRef</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> =</span><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;"> React</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">createRef</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">();</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">	useEffect</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(() </span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">=&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">		let</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;"> val</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> =</span><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;"> catagoryPositions</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">length</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> &gt;</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 1</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> ?</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 2</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> :</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 1</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;">		formRef</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;">current</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">setFieldsValue</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">({</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">			inherit</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;"> val</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">		})</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">	}, [])</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">	const</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;"> onChange</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> =</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> () </span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">=&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">	}</span></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">	const</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;"> changeTab</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> =</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> () </span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">=&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">	}</span></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">	const</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;"> setAttrValue</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> =</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> () </span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">=&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;">		attrSettingDialogRef</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;">current</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">showModelRef</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">()</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">	}</span></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">	const</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;"> confirmFn</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> =</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> (</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">data</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">) </span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">=&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;">		console</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">log</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;data:&quot;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">data</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">)</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">	}</span></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">	const</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;"> inheritPerportyFn</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> =</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> (</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">e</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">) </span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">=&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;">		console</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">log</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;val:&quot;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;">e</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;">target</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">value</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">)</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;">		e</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;">target</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">value</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> ===</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 2</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> ?</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;"> setIsShowPeroptyRow</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#0000FF;--shiki-dark:#D19A66;">true</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">) </span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">:</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;"> setIsShowPeroptyRow</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#0000FF;--shiki-dark:#D19A66;">false</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">)</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">	}</span></span>
<span class="line"><span style="--shiki-light:#AF00DB;--shiki-dark:#C678DD;">	return</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> (</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">		&lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> className</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;add-attr-page&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">			&lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> className</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;head-title&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">				&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Iconfont</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> type</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;icon-down&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;&lt;/</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Iconfont</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">				基础属性</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">			&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">			&lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> className</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;basic-info&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">				&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Form</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">					labelCol</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">{ </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">span</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 6</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;"> }</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">					wrapperCol</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">{ </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">span</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 18</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;"> }</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">					form</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">form</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">					ref</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">formRef</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">					initialValues</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">formInitialValues</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">				&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">					&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Form.Item</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> label</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;类目名&quot;</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> name</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;type&quot;</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> rules</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">[{ </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">required</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#0000FF;--shiki-dark:#D19A66;"> true</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">message</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &#39;所属类型不能为空&#39;</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;"> }]</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">						&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Input</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> style</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">{ </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">width</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 320</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;"> }</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;"> /&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">					&lt;/</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Form.Item</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">					&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Form.Item</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> label</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;类目编号&quot;</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> name</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;code&quot;</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> rules</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">[{ </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">required</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#0000FF;--shiki-dark:#D19A66;"> true</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">message</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &#39;所属类型不能为空&#39;</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;"> }]</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">						&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Input</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> style</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">{ </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">width</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 320</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;"> }</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;"> /&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">					&lt;/</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Form.Item</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">					&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Form.Item</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> label</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;类目位置&quot;</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> name</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;position&quot;</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> rules</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">[{ </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">required</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#0000FF;--shiki-dark:#D19A66;"> true</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">message</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &#39;属性名不能为空&#39;</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;"> }]</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">						&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Input</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> style</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">{ </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">width</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 320</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;"> }</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> disabled</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> defaultValue</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;">catagoryPositions</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">join</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;/&quot;</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">)</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;"> /&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">					&lt;/</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Form.Item</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">					&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Form.Item</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> label</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;是否为末级类目&quot;</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> name</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;control&quot;</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> rules</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">[{ </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">required</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#0000FF;--shiki-dark:#D19A66;"> true</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">message</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &#39;属性控件不能为空&#39;</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;"> }]</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">						&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Radio.Group</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> onChange</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">onChange</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> value</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">isLastCatagoryVal</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">							&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Radio</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> value</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">1</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">是</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Radio</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">							&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Radio</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> value</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">2</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">否</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Radio</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">						&lt;/</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Radio.Group</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">					&lt;/</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Form.Item</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">					&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Form.Item</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> label</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;是否继承属性设置&quot;</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> name</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;inherit&quot;</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> rules</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">[{ </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">required</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#0000FF;--shiki-dark:#D19A66;"> true</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">message</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &#39;属性控件不能为空&#39;</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;"> }]</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">						&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Radio.Group</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> onChange</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">inheritPerportyFn</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> value</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">setttingVal</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">							&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Radio</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> value</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">1</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">继承上级属性设置</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Radio</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">							&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Radio</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> value</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">2</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">自定义设置</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Radio</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">						&lt;/</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Radio.Group</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">					&lt;/</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Form.Item</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">				&lt;/</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Form</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">			&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">			{</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">				isShowPeroptyRow</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> ?</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">					&lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> className</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;perptoty-setting-box&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">						&lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> className</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;head-title&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">							&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Iconfont</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> type</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;icon-down&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;&lt;/</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Iconfont</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;"> 属性设置</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">						&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">						&lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> className</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;attr-setting&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">							&lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> className</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;tab-wrap&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">								&lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> className</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&#39;basic-attrs atts-item&#39;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">									&lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> className</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&#39;name&#39;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">定额基础属性:</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">									&lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> className</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&#39;attr-setting-container&#39;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">										&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Space</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> size</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">20</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">											{</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;">												list</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">map</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">item</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;"> =&gt;</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;"> (</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">													&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Space</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> size</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;large&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">														&lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">span</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">																&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Checkbox</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> onChange</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">onChange</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;">item</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">name</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Checkbox</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">																&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Iconfont</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> type</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;icon-edit&quot;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">																					onClick</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">setAttrValue</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;&lt;/</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Iconfont</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">														&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">span</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">														&lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">span</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">																&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Checkbox</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> onChange</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">onChange</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">必填</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Checkbox</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;"> </span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">														&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">span</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">													&lt;/</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Space</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">												))</span></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">											}</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">										&lt;/</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Space</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">									&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">								&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">								&lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> className</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&#39;basic-attrs atts-item&#39;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">									&lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> className</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&#39;name&#39;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">主材属性:</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">									&lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> className</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&#39;attr-setting-container&#39;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">										&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Space</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">											{</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;">												list</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">map</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">item</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;"> =&gt;</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;"> (</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">													&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Space</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> size</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;large&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">														&lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">span</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">																&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Checkbox</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> onChange</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">onChange</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;">item</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">name</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Checkbox</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">																&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Iconfont</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> type</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;icon-edit&quot;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">																					onClick</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">setAttrValue</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;&lt;/</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Iconfont</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">														&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">span</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">														&lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">span</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">																&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Checkbox</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> onChange</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">onChange</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">必填</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Checkbox</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;"> </span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">														&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">span</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">													&lt;/</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Space</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">												))</span></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">											}</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">										&lt;/</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Space</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">									&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">								&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">								&lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> className</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&#39;basic-attrs atts-item&#39;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">									&lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> className</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&#39;name&#39;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">辅材属性:</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">									&lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> className</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&#39;attr-setting-container&#39;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">										&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Space</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">											{</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;">												list</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">map</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">item</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;"> =&gt;</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;"> (</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">													&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Space</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> size</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;large&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">														&lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">span</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">																&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Checkbox</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> onChange</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">onChange</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;">item</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">name</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Checkbox</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">																&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Iconfont</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> type</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;icon-edit&quot;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">																					onClick</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">setAttrValue</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;&lt;/</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Iconfont</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">														&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">span</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">														&lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">span</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">																&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Checkbox</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> onChange</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">onChange</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">必填</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Checkbox</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;"> </span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">														&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">span</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">													&lt;/</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Space</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">												))</span></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">											}</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">										&lt;/</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Space</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">									&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">								&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">							&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">							&lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> className</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;btns&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">								&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Space</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">									&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Button</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> type</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">取消</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Button</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">									&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Button</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> type</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;primary&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">确认</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Button</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">								&lt;/</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Space</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">							&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">						&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">					&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> :</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &quot;&quot;</span></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">			}</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">		&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">	)</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#AF00DB;--shiki-dark:#C678DD;">export</span><span style="--shiki-light:#AF00DB;--shiki-dark:#C678DD;"> default</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;"> CreateCatagory</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br><span class="line-number">74</span><br><span class="line-number">75</span><br><span class="line-number">76</span><br><span class="line-number">77</span><br><span class="line-number">78</span><br><span class="line-number">79</span><br><span class="line-number">80</span><br><span class="line-number">81</span><br><span class="line-number">82</span><br><span class="line-number">83</span><br><span class="line-number">84</span><br><span class="line-number">85</span><br><span class="line-number">86</span><br><span class="line-number">87</span><br><span class="line-number">88</span><br><span class="line-number">89</span><br><span class="line-number">90</span><br><span class="line-number">91</span><br><span class="line-number">92</span><br><span class="line-number">93</span><br><span class="line-number">94</span><br><span class="line-number">95</span><br><span class="line-number">96</span><br><span class="line-number">97</span><br><span class="line-number">98</span><br><span class="line-number">99</span><br><span class="line-number">100</span><br><span class="line-number">101</span><br><span class="line-number">102</span><br><span class="line-number">103</span><br><span class="line-number">104</span><br><span class="line-number">105</span><br><span class="line-number">106</span><br><span class="line-number">107</span><br><span class="line-number">108</span><br><span class="line-number">109</span><br><span class="line-number">110</span><br><span class="line-number">111</span><br><span class="line-number">112</span><br><span class="line-number">113</span><br><span class="line-number">114</span><br><span class="line-number">115</span><br><span class="line-number">116</span><br><span class="line-number">117</span><br><span class="line-number">118</span><br><span class="line-number">119</span><br><span class="line-number">120</span><br><span class="line-number">121</span><br><span class="line-number">122</span><br><span class="line-number">123</span><br><span class="line-number">124</span><br><span class="line-number">125</span><br><span class="line-number">126</span><br><span class="line-number">127</span><br><span class="line-number">128</span><br><span class="line-number">129</span><br><span class="line-number">130</span><br><span class="line-number">131</span><br><span class="line-number">132</span><br><span class="line-number">133</span><br><span class="line-number">134</span><br><span class="line-number">135</span><br><span class="line-number">136</span><br><span class="line-number">137</span><br><span class="line-number">138</span><br><span class="line-number">139</span><br><span class="line-number">140</span><br><span class="line-number">141</span><br><span class="line-number">142</span><br><span class="line-number">143</span><br><span class="line-number">144</span><br><span class="line-number">145</span><br><span class="line-number">146</span><br><span class="line-number">147</span><br><span class="line-number">148</span><br><span class="line-number">149</span><br><span class="line-number">150</span><br><span class="line-number">151</span><br><span class="line-number">152</span><br><span class="line-number">153</span><br><span class="line-number">154</span><br><span class="line-number">155</span><br><span class="line-number">156</span><br><span class="line-number">157</span><br><span class="line-number">158</span><br><span class="line-number">159</span><br><span class="line-number">160</span><br><span class="line-number">161</span><br><span class="line-number">162</span><br><span class="line-number">163</span><br><span class="line-number">164</span><br><span class="line-number">165</span><br><span class="line-number">166</span><br><span class="line-number">167</span><br><span class="line-number">168</span><br><span class="line-number">169</span><br><span class="line-number">170</span><br><span class="line-number">171</span><br><span class="line-number">172</span><br><span class="line-number">173</span><br><span class="line-number">174</span><br><span class="line-number">175</span><br><span class="line-number">176</span><br><span class="line-number">177</span><br><span class="line-number">178</span><br><span class="line-number">179</span><br><span class="line-number">180</span><br><span class="line-number">181</span><br></div></div><p>通过表单本身去进行setFieldsValue操作。把defaultValue的逻辑改为表单的操作。终于可以正常显示。 注意改动的地方： （1）form表单本身绑定initialValues={formInitialValues} （2）定义一个初始值：</p><div class="language-jsx vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">jsx</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">const</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;"> formInitialValues</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> =</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> ({</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">	inherit</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 1</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">,</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">	isLastCatagory</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 1</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">})</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>（3） useEffect里通过formRef.current.setFieldsValue({inherit: val})来设置默认值。</p><div class="language-jsx vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">jsx</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">  useEffect</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(() </span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">=&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">	let</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;"> val</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> =</span><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;"> catagoryPositions</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">length</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> &gt;</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 1</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> ?</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 2</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> :</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 1</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;">	formRef</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;">current</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">setFieldsValue</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">({</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">		inherit</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;"> val</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">,</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">		isLastCatagory</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;"> val</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">	})</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}, [])</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p>这里补充一点：</p><p>在antd中，对form的处理有两种思路 一种是通过把表单元素作为受控组件。也就是我们通过形如</p><div class="language-jsx vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">jsx</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Input</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> value</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">aaa</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> onChange</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">e</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;"> =&gt;</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;"> change</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">e</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">)</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>我们通过给表单元素的value绑定某个值然后通过change事件更改其值。来驱动数据的更改</p><p>第二种思路则是最常见的一种：通过form实例的相关方法来驱动：</p><p>如下：</p><div class="language-jsx vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">jsx</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#AF00DB;--shiki-dark:#C678DD;">import</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> { </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">Form</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">Input</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">Button</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> } </span><span style="--shiki-light:#AF00DB;--shiki-dark:#C678DD;">from</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &quot;antd&quot;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">const</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;"> FormDemo</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> =</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> () </span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">=&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">	const</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> [</span><span style="--shiki-light:#0070C1;--shiki-dark:#E5C07B;">form</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">] </span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;"> Form</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">useForm</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">();</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">	let</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;"> initValus</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> =</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">		username</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &quot;&quot;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">,</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">		password</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &quot;&quot;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">	}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">	const</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;"> view</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> =</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> () </span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">=&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">		//    let res= form.getFieldsValue()</span></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">		let</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;"> res</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> =</span><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;"> form</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">getFieldValue</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;username&quot;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">)</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;">		console</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">log</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;res:&quot;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">res</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">)</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">	}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#AF00DB;--shiki-dark:#C678DD;">	return</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> (</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">		&lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> style</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">{ </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">width</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &quot;520px&quot;</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;"> }</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">			&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;"> Form</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> initialValues</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">initValus</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> form</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">form</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">				&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Form.Item</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> name</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;username&quot;</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> label</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;用户名&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">					&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Input</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> placeholder-</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;请输入姓名&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;&lt;/</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Input</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">				&lt;/</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Form.Item</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">				&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Form.Item</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> name</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;password&quot;</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> label</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;密码&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">					&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Input</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> placeholder-</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;请输入密码&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;&lt;/</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Input</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">				&lt;/</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Form.Item</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">			&lt;/</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Form</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">			&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Button</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> onClick</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">view</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">查看</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Button</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">		&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">	)</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#AF00DB;--shiki-dark:#C678DD;">export</span><span style="--shiki-light:#AF00DB;--shiki-dark:#C678DD;"> default</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;"> FormDemo</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br></div></div><p>form实例的getFieldsValue()能获取到每个Form.Item的字段的值；</p><p>form实例的getFieldValue(“username”)能获取某个字段，比如usernameForm.Item的字段的值；</p><p>form实例的setFieldsValue()能设置某个字段或者所有字段的值。</p><p>此二种方法用其一即可</p><h2 id="form表单里面item默认值的回填问题" tabindex="-1">Form表单里面Item默认值的回填问题 <a class="header-anchor" href="#form表单里面item默认值的回填问题" aria-label="Permalink to &quot;Form表单里面Item默认值的回填问题&quot;">​</a></h2><p>例如：</p><p>使用 initialValue 属性回填信息，但是如果这个值开始没有</p><p>使用三元运算符写为action?.DemoAddress ? action?.DemoAddress:null，页面默认值就会出现不合法的值，后面的空值要写为undefined。</p><div class="language-jsx vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">jsx</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Item</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">	label</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;演示环境&quot;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">	name</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;demoAddress&quot;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">	labelAlign</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;left&quot;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">	initialValue</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;">action</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">?.</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">DemoAddress</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> ?</span><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;"> action</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">?.</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">DemoAddress</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> :</span><span style="--shiki-light:#0000FF;--shiki-dark:#D19A66;"> undefined</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">	rules</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">[{ </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">required</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#0000FF;--shiki-dark:#D19A66;"> true</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">message</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &#39;请选择演示环境!&#39;</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;"> }]</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">/&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h2 id="在表单控件中如何传递参数" tabindex="-1">在表单控件中如何传递参数？ <a class="header-anchor" href="#在表单控件中如何传递参数" aria-label="Permalink to &quot;在表单控件中如何传递参数？&quot;">​</a></h2><p>实现方式：箭头函数传参,注意箭头函数第一个参数只能是e，第二个函数里传对应的数据</p><div class="language-text vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">text</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span> const selectedItem = (e, data) =&gt; {</span></span>
<span class="line"><span>	console.log(&quot;e:&quot;, e)</span></span>
<span class="line"><span>	console.log(&quot;data:&quot;, data)</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span></span></span>
<span class="line"><span>{</span></span>
<span class="line"><span>	list.map(checkboxItem =&gt; (&lt;Checkbox</span></span>
<span class="line"><span>		onChange={(e) =&gt; selectedItem(e, checkboxItem)}</span></span>
<span class="line"><span>		checked={checkboxItem.isChecked}</span></span>
<span class="line"><span>	&gt;</span></span>
<span class="line"><span>		{checkboxItem.label}</span></span>
<span class="line"><span>	&lt;/Checkbox&gt;))</span></span>
<span class="line"><span>}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><h2 id="form表单结合modal框使用" tabindex="-1">Form表单结合Modal框使用 <a class="header-anchor" href="#form表单结合modal框使用" aria-label="Permalink to &quot;Form表单结合Modal框使用&quot;">​</a></h2><p>Form表单结合Modal框使用时，当关闭Modal框时，form表单的内容需要清空，使用form.resetFields() 清空即可，但当时组件写完没有起作用，所以经过阅读文档，查阅到另一种方法：</p><h2 id="form表单的input框中-填入默认值-使用initialvalue" tabindex="-1">form表单的input框中，填入默认值，使用initialValue <a class="header-anchor" href="#form表单的input框中-填入默认值-使用initialvalue" aria-label="Permalink to &quot;form表单的input框中，填入默认值，使用initialValue&quot;">​</a></h2><p>但是使用后发现，默认值不会随着数据的变化而变化，第一次刷新后不会变化，查阅官方文档，得知：</p><p>所以当数据发生变化时，可以使用<strong>form.setFieldsValue</strong>来动态更新input框的默认值。</p><h3 id="关于antd中的form组件设置了initialvalues属性后-如何在state或者props中的属性变化后-重新渲染修改form中的数据显示的三种解决办法" tabindex="-1">关于antd中的Form组件设置了initialValues属性后，如何在state或者props中的属性变化后，重新渲染修改Form中的数据显示的三种解决办法 <a class="header-anchor" href="#关于antd中的form组件设置了initialvalues属性后-如何在state或者props中的属性变化后-重新渲染修改form中的数据显示的三种解决办法" aria-label="Permalink to &quot;关于antd中的Form组件设置了initialValues属性后，如何在state或者props中的属性变化后，重新渲染修改Form中的数据显示的三种解决办法&quot;">​</a></h3><p><a href="https://article.juejin.cn/post/7143031321554583565?from=search-suggest" target="_blank" rel="noreferrer">https://article.juejin.cn/post/7143031321554583565?from=search-suggest</a></p><h2 id="确认提交和取消提交时关于rules验证问题" tabindex="-1">确认提交和取消提交时关于rules验证问题： <a class="header-anchor" href="#确认提交和取消提交时关于rules验证问题" aria-label="Permalink to &quot;确认提交和取消提交时关于rules验证问题：&quot;">​</a></h2><p>在点击修改时，在input框中填入内容，触发rules的动态验证，所以导致取消提交时，rules的动态验证仍然存在，解决方法：</p><p>在点击取消修改时，可以停止校验即可不在出现rules校验内容。</p><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;">form</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">setFields</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">([</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">	{</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">		name</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &#39;phone&#39;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">value</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &#39; &#39;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">errors</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#0000FF;--shiki-dark:#D19A66;"> null</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">	}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">])</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h2 id="input" tabindex="-1">Input <a class="header-anchor" href="#input" aria-label="Permalink to &quot;Input&quot;">​</a></h2><h3 id="input的只读模式" tabindex="-1">input的只读模式 <a class="header-anchor" href="#input的只读模式" aria-label="Permalink to &quot;input的只读模式&quot;">​</a></h3><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>&lt;Input readOnly /&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>注意：是<a href="https://so.csdn.net/so/search?q=readOnly&amp;spm=1001.2101.3001.7020" target="_blank" rel="noreferrer">readOnly</a>，readonly或readonly=”readonly”无效</p><h3 id="suffix属性" tabindex="-1">suffix属性 <a class="header-anchor" href="#suffix属性" aria-label="Permalink to &quot;suffix属性&quot;">​</a></h3><p>（1）suffix可以显示在表单控件的尾部，可以帮助显示输入的字数</p><p>（2）suffix属性可以和getFieldValue(&#39;&#39;)配和，根据属性名来识别当前正在输入的表单getFieldValue(&#39;name&#39;).length 就是当前输入的表单的长度，也就是字数</p><div class="language-text vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">text</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>&lt;Input suffix={getFieldValue(&#39;name&#39;).length} maxLength=&quot;30&quot; /&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="组件取值问题" tabindex="-1">组件取值问题 <a class="header-anchor" href="#组件取值问题" aria-label="Permalink to &quot;组件取值问题&quot;">​</a></h3><p>（1）有的组件是直接取值，从value中取值，有的组件是从 e.target.value中取值</p><p>（2） select组件是直接取value的值，input , textarea等文本输入框都是从e.target.value中取值</p><div class="language-text vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">text</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>val =&gt; this.hisIdChange(val)} &gt;</span></span>
<span class="line"><span> onChange={(e) =&gt; {	</span></span>
<span class="line"><span>   this.valye =  e.target.value</span></span>
<span class="line"><span>  }}</span></span>
<span class="line"><span>/&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h3 id="antd的form-的input输入框怎么限制不能输入空格" tabindex="-1">antd的form 的input输入框怎么限制不能输入空格 <a class="header-anchor" href="#antd的form-的input输入框怎么限制不能输入空格" aria-label="Permalink to &quot;antd的form 的input输入框怎么限制不能输入空格&quot;">​</a></h3><p>AntDesign中的Form表单其实提供了非常丰富的校验方式，有两种方式解决input不能输入空格的问题（具体看自己的需求）</p><div class="language-text vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">text</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>&lt;Form.Item label=&quot;名字&quot;&gt;</span></span>
<span class="line"><span>  {getFieldDecorator(&#39;name&#39;, {</span></span>
<span class="line"><span>    rules: [</span></span>
<span class="line"><span>        {</span></span>
<span class="line"><span>         required: true,</span></span>
<span class="line"><span>         message: &#39;请输入名字&#39;,</span></span>
<span class="line"><span>        },</span></span>
<span class="line"><span>   // 方式一：正则匹配（提示错误，这种会在提交表单时给提示，阻止表单提交）</span></span>
<span class="line"><span>       { pattern: /^[^\s]*$/, message: &#39;禁止输入空格&#39;,}</span></span>
<span class="line"><span>],</span></span>
<span class="line"><span> </span></span>
<span class="line"><span>  // 方式二：粗暴点&lt;Input&gt;不允许输入空格(其实是将e.tartget.value转成控件自己的值)</span></span>
<span class="line"><span>  // 这个方法的用途非常强大，还可以结合upload做一些文件上传之后的回调处理</span></span>
<span class="line"><span>      getValueFromEvent: (event) =&gt; {</span></span>
<span class="line"><span>         return event.target.value.replace(/\s+/g,&quot;&quot;)</span></span>
<span class="line"><span>        },</span></span>
<span class="line"><span>})</span></span>
<span class="line"><span>(&lt;Input size=&quot;large&quot; placeholder=&quot;请输入名字&quot; maxLength={20} /&gt;)}</span></span>
<span class="line"><span>&lt;/Form.Item&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div><h2 id="inputnumber" tabindex="-1">InputNumber <a class="header-anchor" href="#inputnumber" aria-label="Permalink to &quot;InputNumber&quot;">​</a></h2><h3 id="precision-的值为整数-表示小数点后保留几位小数" tabindex="-1">precision 的值为整数，表示小数点后保留几位小数 <a class="header-anchor" href="#precision-的值为整数-表示小数点后保留几位小数" aria-label="Permalink to &quot;precision 的值为整数，表示小数点后保留几位小数&quot;">​</a></h3><p>Ant Design 中的 InputNumber 组件可以设置 precision 属性来控制输入数字的精度。precision 的值为整数，表示小数点后保留几位小数。例如： <code>&lt;InputNumber precision={2} /&gt;</code></p><p>这将限制用户只能输入最多两位小数的数字。</p><p>默认情况下，precision 值为 undefined，表示不限制小数位数。</p><p>另外还有min,max 可以设置输入的最大最小值。</p><h3 id="antd-inputnumber-如何设置-实现-输入范围2-00-9-00-步长为0-1" tabindex="-1">antd inputNumber 如何设置,实现 输入范围2.00 - 9.00,步长为0.1 <a class="header-anchor" href="#antd-inputnumber-如何设置-实现-输入范围2-00-9-00-步长为0-1" aria-label="Permalink to &quot;antd inputNumber 如何设置,实现 输入范围2.00 - 9.00,步长为0.1&quot;">​</a></h3><p>在Ant Design中，InputNumber组件允许你设置一个输入框，专门用于接收数值输入。要实现你提出的范围为2.00至9.00，步长为0.1的功能，你可以使用min、max和step属性。 以下是实现这个需求的代码示例：</p><div class="language-jsx vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">jsx</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#AF00DB;--shiki-dark:#C678DD;">import</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;"> React</span><span style="--shiki-light:#AF00DB;--shiki-dark:#C678DD;"> from</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &#39;react&#39;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#AF00DB;--shiki-dark:#C678DD;">import</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> { </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">InputNumber</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> } </span><span style="--shiki-light:#AF00DB;--shiki-dark:#C678DD;">from</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &#39;antd&#39;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">const</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;"> InputNumberExample</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> =</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> () </span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">=&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> (</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">	&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">InputNumber</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">		min</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">2</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">		max</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">9</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">		step</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">0.1</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">		formatter</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">value</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;"> =&gt;</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> `</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">${</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">value</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">`</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">replace</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#811F3F;--shiki-dark:#E06C75;">/\d</span><span style="--shiki-light:#000000;--shiki-dark:#D19A66;">*</span><span style="--shiki-light:#EE0000;--shiki-dark:#56B6C2;">\.</span><span style="--shiki-light:#000000;--shiki-dark:#D19A66;">?</span><span style="--shiki-light:#811F3F;--shiki-dark:#E06C75;">0</span><span style="--shiki-light:#000000;--shiki-dark:#D19A66;">*</span><span style="--shiki-light:#EE0000;--shiki-dark:#C678DD;">$</span><span style="--shiki-light:#811F3F;--shiki-dark:#E06C75;">/</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&#39;&#39;</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">)</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">		parser</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">value</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;"> =&gt;</span><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;"> value</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">replace</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#811F3F;--shiki-dark:#E06C75;">/</span><span style="--shiki-light:#EE0000;--shiki-dark:#56B6C2;">\$</span><span style="--shiki-light:#811F3F;--shiki-dark:#E06C75;">\s</span><span style="--shiki-light:#000000;--shiki-dark:#D19A66;">?</span><span style="--shiki-light:#EE0000;--shiki-dark:#ABB2BF;">|</span><span style="--shiki-light:#D16969;--shiki-dark:#E06C75;">(?!</span><span style="--shiki-light:#EE0000;--shiki-dark:#56B6C2;">\.</span><span style="--shiki-light:#811F3F;--shiki-dark:#E06C75;">\d</span><span style="--shiki-light:#000000;--shiki-dark:#D19A66;">{1,2}</span><span style="--shiki-light:#D16969;--shiki-dark:#E06C75;">)</span><span style="--shiki-light:#811F3F;--shiki-dark:#E06C75;">\d</span><span style="--shiki-light:#000000;--shiki-dark:#D19A66;">{1,2}</span><span style="--shiki-light:#D16969;--shiki-dark:#E06C75;">(?=(</span><span style="--shiki-light:#811F3F;--shiki-dark:#E06C75;">\d</span><span style="--shiki-light:#000000;--shiki-dark:#D19A66;">{3}</span><span style="--shiki-light:#D16969;--shiki-dark:#E06C75;">)</span><span style="--shiki-light:#000000;--shiki-dark:#D19A66;">+</span><span style="--shiki-light:#D16969;--shiki-dark:#E06C75;">(?!</span><span style="--shiki-light:#811F3F;--shiki-dark:#E06C75;">\d</span><span style="--shiki-light:#D16969;--shiki-dark:#E06C75;">))</span><span style="--shiki-light:#EE0000;--shiki-dark:#ABB2BF;">|</span><span style="--shiki-light:#EE0000;--shiki-dark:#56B6C2;">\.</span><span style="--shiki-light:#811F3F;--shiki-dark:#E06C75;">\d</span><span style="--shiki-light:#000000;--shiki-dark:#D19A66;">{1,2}</span><span style="--shiki-light:#EE0000;--shiki-dark:#C678DD;">$</span><span style="--shiki-light:#811F3F;--shiki-dark:#E06C75;">/</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">g</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&#39;$1&#39;</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">)</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">		style</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">{ </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">width</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 120</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;"> }</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">	/&gt;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">);</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#AF00DB;--shiki-dark:#C678DD;">export</span><span style="--shiki-light:#AF00DB;--shiki-dark:#C678DD;"> default</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;"> InputNumberExample</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><p>这段代码中，formatter和parser属性用于格式化和解析用户的输入，以确保数值正确显示和解析。 style属性用于设置输入框的样式宽度。用户将只能在2.00至9.00之间输入，并且每次可以增加或减少0.1。</p><h3 id="比如我需要实现即使用户输入的是2-04-也会改成2-00-若输入2-35-则改成2-40-该如何书写" tabindex="-1">比如我需要实现即使用户输入的是2.04，也会改成2.00 ，若输入2.35，则改成2.40，该如何书写 <a class="header-anchor" href="#比如我需要实现即使用户输入的是2-04-也会改成2-00-若输入2-35-则改成2-40-该如何书写" aria-label="Permalink to &quot;比如我需要实现即使用户输入的是2.04，也会改成2.00 ，若输入2.35，则改成2.40，该如何书写&quot;">​</a></h3><p>要实现这样的需求，即使用户输入了像2.04这样的值，它会自动被四舍五入到最近的0.1（也就是2.00），而2.35会被向上取整到2.40，你需要自定义<code>onChange</code> 处理函数来处理这些逻辑。</p><p>在<code>InputNumber</code>组件中，<code>onChange</code>属性接收一个回调函数，这个函数会在用户输入或修改值时调用，并传入当前的值作为参数。你可以在这个函数中实现你的自定义逻辑。</p><p>下面是一个简单的实现示例：</p><div class="language-jsx vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">jsx</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#AF00DB;--shiki-dark:#C678DD;">import</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;"> React</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, { </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">useState</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> } </span><span style="--shiki-light:#AF00DB;--shiki-dark:#C678DD;">from</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &#39;react&#39;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#AF00DB;--shiki-dark:#C678DD;">import</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> { </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">InputNumber</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> } </span><span style="--shiki-light:#AF00DB;--shiki-dark:#C678DD;">from</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &#39;antd&#39;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">const</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;"> CustomInputNumber</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> =</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> () </span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">=&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">	const</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> [</span><span style="--shiki-light:#0070C1;--shiki-dark:#E5C07B;">value</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#0070C1;--shiki-dark:#E5C07B;">setValue</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">] </span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;"> useState</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#0000FF;--shiki-dark:#D19A66;">null</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">);</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">	const</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;"> handleChange</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> =</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> (</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">newValue</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">) </span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">=&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">		// 四舍五入到最近的0.1  </span></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">		const</span><span style="--shiki-light:#0070C1;--shiki-dark:#E5C07B;"> roundedValue</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> =</span><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;"> Math</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">round</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">newValue</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> *</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 10</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">) </span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">/</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 10</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">		// 设置状态，以触发组件重新渲染  </span></span>
<span class="line"><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">		setValue</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">roundedValue</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">);</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">	};</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#AF00DB;--shiki-dark:#C678DD;">	return</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> (</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">		&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">InputNumber</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">			min</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">2</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">			max</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">9</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">			step</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">0.1</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">			value</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">value</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">			onChange</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">handleChange</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">			style</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">{ </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">width</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 120</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;"> }</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">		/&gt;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">	);</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">};</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#AF00DB;--shiki-dark:#C678DD;">export</span><span style="--shiki-light:#AF00DB;--shiki-dark:#C678DD;"> default</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;"> CustomInputNumber</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br></div></div><p>在这个示例中，我们使用了React的<code>useState</code>钩子来管理<code>InputNumber</code>组件的值。<code>handleChange</code> 函数会在用户输入时调用，并使用<code>Math.round</code>函数将值四舍五入到最近的0.1。然后，我们使用<code>setValue</code> 来更新状态，这会触发组件的重新渲染，并显示四舍五入后的值。</p><p>现在，无论用户输入什么值，只要它在2.00到9.00的范围内，它都会被四舍五入到最近的0.1，并且显示在<code>InputNumber</code>组件中。</p><h3 id="上述代码会保留两位小数吗" tabindex="-1">上述代码会保留两位小数吗? <a class="header-anchor" href="#上述代码会保留两位小数吗" aria-label="Permalink to &quot;上述代码会保留两位小数吗?&quot;">​</a></h3><p>是的，上述代码会保留两位小数，因为InputNumber组件默认会保留小数点后两位。当用户输入或修改值时，它会自动格式化为保留两位小数的形式。 不过，如果你想要确保即使输入的是2.0或2这样的值也显示为2.00，你可以在formatter函数中添加一些逻辑来确保总是显示两位小数。</p><p>以下是更新后的formatter和parser函数，以确保输入值始终显示为两位小数：</p><div class="language-jsx vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">jsx</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#AF00DB;--shiki-dark:#C678DD;">import</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;"> React</span><span style="--shiki-light:#AF00DB;--shiki-dark:#C678DD;"> from</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &#39;react&#39;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#AF00DB;--shiki-dark:#C678DD;">import</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> { </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">InputNumber</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> } </span><span style="--shiki-light:#AF00DB;--shiki-dark:#C678DD;">from</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &#39;antd&#39;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">const</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;"> InputNumberExample</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> =</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> () </span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">=&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> (</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">	&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">InputNumber</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">		min</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">2</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">		max</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">9</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">		step</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">0.1</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">		formatter</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">value</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">) </span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">=&gt;</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> `</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">${</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">parseFloat</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">value</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">).</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">toFixed</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">2</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">)</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">`</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">		parser</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">value</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">) </span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">=&gt;</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;"> parseFloat</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">value</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">)</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">		style</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">{ </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">width</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 120</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;"> }</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">	/&gt;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">);</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#AF00DB;--shiki-dark:#C678DD;">export</span><span style="--shiki-light:#AF00DB;--shiki-dark:#C678DD;"> default</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;"> InputNumberExample</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><p>在这个例子中，formatter函数使用toFixed(2) 来确保值始终有两位小数。如果用户输入2.04，它会被格式化为2.04；如果输入2.35，它也会被格式化为2.35。同样，如果用户输入2或2.0，它们会被格式化为2.00。</p><p>parser函数将格式化后的字符串转换回数字，以便在内部使用。这里使用parseFloat来解析值，它会自动忽略多余的零和小数点。</p><p>这样，用户看到的值始终会保留两位小数，而组件内部处理的值也将是正确解析的数字。</p><h3 id="若用户输入的是空值呢-不会报错吧" tabindex="-1">若用户输入的是空值呢，不会报错吧? <a class="header-anchor" href="#若用户输入的是空值呢-不会报错吧" aria-label="Permalink to &quot;若用户输入的是空值呢，不会报错吧?&quot;">​</a></h3><p>在Ant Design的InputNumber组件中，如果用户输入空值（即没有输入任何数值），通常不会报错。InputNumber组件会将其视为null或undefined，这取决于你如何设置组件的value和onChange属性。</p><p>如果你使用InputNumber组件的受控模式（即你通过value属性控制组件的值，并监听onChange事件来更新状态），你可能需要处理空值的情况。当用户清除输入框中的内容时，onChange事件会被触发，并且newValue将会是undefined或空字符串。你可以在你的onChange处理函数中检查这个值，并相应地更新你的状态。</p><p>下面是一个处理空值的onChange函数的例子：</p><div class="language-jsx vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">jsx</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#AF00DB;--shiki-dark:#C678DD;">import</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;"> React</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, { </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">useState</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> } </span><span style="--shiki-light:#AF00DB;--shiki-dark:#C678DD;">from</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &#39;react&#39;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#AF00DB;--shiki-dark:#C678DD;">import</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> { </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">InputNumber</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> } </span><span style="--shiki-light:#AF00DB;--shiki-dark:#C678DD;">from</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &#39;antd&#39;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">const</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;"> CustomInputNumber</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> =</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> () </span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">=&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">	const</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> [</span><span style="--shiki-light:#0070C1;--shiki-dark:#E5C07B;">value</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#0070C1;--shiki-dark:#E5C07B;">setValue</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">] </span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;"> useState</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#0000FF;--shiki-dark:#D19A66;">null</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">);</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">	const</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;"> handleChange</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> =</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> (</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">newValue</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">) </span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">=&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">		// 当用户清除输入框内容时，newValue 将会是 undefined</span></span>
<span class="line"><span style="--shiki-light:#AF00DB;--shiki-dark:#C678DD;">		if</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> (</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">newValue</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> ===</span><span style="--shiki-light:#0000FF;--shiki-dark:#D19A66;"> undefined</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> ||</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;"> newValue</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> ===</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &#39;&#39;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">) {</span></span>
<span class="line"><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">			setValue</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#0000FF;--shiki-dark:#D19A66;">null</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">); </span><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">// 你可以设置为你想要的默认值，比如 null</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">		} </span><span style="--shiki-light:#AF00DB;--shiki-dark:#C678DD;">else</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">			// 确保值是有效的数字，并且在范围内</span></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">			const</span><span style="--shiki-light:#0070C1;--shiki-dark:#E5C07B;"> parsedValue</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> =</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;"> parseFloat</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">newValue</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">);</span></span>
<span class="line"><span style="--shiki-light:#AF00DB;--shiki-dark:#C678DD;">			if</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> (</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">parsedValue</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> &gt;=</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 2</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> &amp;&amp;</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;"> parsedValue</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> &lt;=</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 9</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">) {</span></span>
<span class="line"><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">				setValue</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">parsedValue</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">);</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">			}</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">		}</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">	};</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#AF00DB;--shiki-dark:#C678DD;">	return</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> (</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">		&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">InputNumber</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">			min</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">2</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">			max</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">9</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">			step</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">0.1</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">			value</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">value</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">			onChange</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">handleChange</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">			style</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">{ </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">width</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 120</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;"> }</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">		/&gt;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">	);</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">};</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#AF00DB;--shiki-dark:#C678DD;">export</span><span style="--shiki-light:#AF00DB;--shiki-dark:#C678DD;"> default</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;"> CustomInputNumber</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br></div></div><p>在这个例子中，如果用户尝试输入空值，handleChange函数会检查newValue，如果它是undefined或空字符串，就会将状态value设置为null。如果用户输入了有效的数字，并且这个数字在2.00到9.00的范围内，setValue将会被调用以更新状态。</p><p>请注意，由于InputNumber组件的value属性接受的是数字，所以当用户输入非数字字符时，组件会自动将其视为无效输入，并不会触发onChange事件。这意味着你不需要担心非数字输入导致的错误。</p><h2 id="select" tabindex="-1">Select <a class="header-anchor" href="#select" aria-label="Permalink to &quot;Select&quot;">​</a></h2><h3 id="select的模糊搜索以及多选" tabindex="-1">select的模糊搜索以及多选 <a class="header-anchor" href="#select的模糊搜索以及多选" aria-label="Permalink to &quot;select的模糊搜索以及多选&quot;">​</a></h3><div class="language-text vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">text</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>&lt;Form form={form}&gt;</span></span>
<span class="line"><span>    &lt;Form.Item label=&#39;标签&#39; name=&quot;TagName&quot; labelAlign=&quot;left&quot; &gt;</span></span>
<span class="line"><span>    &lt;Select </span></span>
<span class="line"><span>      mode=&quot;multiple&quot;  / /支持多选</span></span>
<span class="line"><span>      showSearch</span></span>
<span class="line"><span>      allowClear</span></span>
<span class="line"><span>      filterOption={(input, option: any) =&gt; option?.props.children?.indexOf(input) &gt;= 0}   //模糊搜索</span></span>
<span class="line"><span>      getPopupContainer={triggerNode =&gt; triggerNode.parentNode}&gt;</span></span>
<span class="line"><span>    {handlerUser.map((res) =&gt; (</span></span>
<span class="line"><span>        &lt;Select.Option key={res?.id} value={res?.TagName}&gt; //支持鼠标点到select框后，将后端数据展示到下拉框</span></span>
<span class="line"><span>          {res?.TagName}</span></span>
<span class="line"><span>        &lt;/Select.Option&gt;</span></span>
<span class="line"><span>    ))}</span></span>
<span class="line"><span>    &lt;/Select &gt;</span></span>
<span class="line"><span>&lt;/Form.Item&gt;</span></span>
<span class="line"><span>&lt;/Form&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><h3 id="filteroption-筛选符合条件的选项" tabindex="-1">filterOption 筛选符合条件的选项 <a class="header-anchor" href="#filteroption-筛选符合条件的选项" aria-label="Permalink to &quot;filterOption 筛选符合条件的选项&quot;">​</a></h3><p>showSearch 配置是否可搜索 筛选包含在options.props.value或者options.props.children之中的input的值， 全部转化为小写之后再进行比对，不区分大小写，剔除不符合条件的选项</p><div class="language-text vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">text</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span> filterOption={</span></span>
<span class="line"><span> (input, options) =&gt; {</span></span>
<span class="line"><span>  return (</span></span>
<span class="line"><span>   options.props.value.toLowerCase().indexOf(input.toLowerCase()) &gt;= 0 ||</span></span>
<span class="line"><span>   options.props.children.indexOf(input.toLowerCase()) &gt;= 0</span></span>
<span class="line"><span> )}</span></span>
<span class="line"><span> }</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h3 id="antd-select组件-filteroption使用踩坑报-options-props-children-tolower-case-is-not-funcrion" tabindex="-1">antd Select组件 filterOption使用踩坑报（options.props.children.toLower.Case() is not funcrion） <a class="header-anchor" href="#antd-select组件-filteroption使用踩坑报-options-props-children-tolower-case-is-not-funcrion" aria-label="Permalink to &quot;antd Select组件 filterOption使用踩坑报（options.props.children.toLower.Case() is not funcrion）&quot;">​</a></h3><p><a href="https://blog.csdn.net/weixin_44058725/article/details/110520032?spm=1001.2014.3001.5502" target="_blank" rel="noreferrer">https://blog.csdn.net/weixin_44058725/article/details/110520032?spm=1001.2014.3001.5502</a> 一旦Option标签里显示值的前后有空格则option.props.children的类型则会成为array类型,这时如果使用了string的方法则会报错导致页面崩溃 还可能出现 TypeErro:Cannot resd property ‘toLowerCase’ of null at filterOption . 需要判断 值不为空的情况 这时就需要 加个判断 再使用 toLowerCase</p><div class="language-text vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">text</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span> filterOption = {(input, option) =&gt; </span></span>
<span class="line"><span>       let val=(Array.isArray(option.children) ? option.children.join(&#39;&#39;) : option.children);</span></span>
<span class="line"><span>       return val?val.toLowerCase().indexOf(input.toLowerCase()) &gt;= 0:null</span></span>
<span class="line"><span>    }</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h3 id="select的默认值-和赋值-时-需要考虑类型必须全等才可以赋值上" tabindex="-1">select的默认值 和赋值 时,需要考虑类型必须全等才可以赋值上 <a class="header-anchor" href="#select的默认值-和赋值-时-需要考虑类型必须全等才可以赋值上" aria-label="Permalink to &quot;select的默认值 和赋值 时,需要考虑类型必须全等才可以赋值上&quot;">​</a></h3><h3 id="error-must-set-key-for-children" tabindex="-1">Error: must set key for children <a class="header-anchor" href="#error-must-set-key-for-children" aria-label="Permalink to &quot;Error: must set key for children&quot;">​</a></h3><p>在使用antd-design中的select的组件时候，报这样的错误。</p><p>原因：在select中设置了多选mode = ‘multiple’，并把initialValue或value的值设为了[”]；</p><p>解决方法：initialValue或value值设为空[]，或不为空的字符串[“xxx”]； 事实上 tree,treeSelect 都是如此</p><h2 id="datepicker" tabindex="-1">DatePicker <a class="header-anchor" href="#datepicker" aria-label="Permalink to &quot;DatePicker&quot;">​</a></h2><h3 id="选不上日期是可能是默认值的影响" tabindex="-1">选不上日期是可能是默认值的影响 <a class="header-anchor" href="#选不上日期是可能是默认值的影响" aria-label="Permalink to &quot;选不上日期是可能是默认值的影响&quot;">​</a></h3><h3 id="datepicker设置默认值时value不能为空-否则叉掉时间后数据格式会显示不正确" tabindex="-1">DatePicker设置默认值时value不能为空，否则叉掉时间后数据格式会显示不正确 <a class="header-anchor" href="#datepicker设置默认值时value不能为空-否则叉掉时间后数据格式会显示不正确" aria-label="Permalink to &quot;DatePicker设置默认值时value不能为空，否则叉掉时间后数据格式会显示不正确&quot;">​</a></h3><p>可以设置为null，来避免这个问题。 <code>value={ beginTime ? beginTime : null }</code></p><h3 id="datepicker的默认值-使用时间戳形式" tabindex="-1"><strong>DatePicker的默认值，使用时间戳形式</strong> <a class="header-anchor" href="#datepicker的默认值-使用时间戳形式" aria-label="Permalink to &quot;**DatePicker的默认值，使用时间戳形式**&quot;">​</a></h3><div class="language-jsx vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">jsx</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Item</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">	label</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;预约开始时间:&quot;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">	name</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;startTime&quot;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">	labelAlign</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;left&quot;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">	initialValue</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;">action</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">?.</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">StartTime</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> ?</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;"> moment</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;">action</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">?.</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">StartTime</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">) </span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">:</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &#39;&#39;</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">	rules</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">[{ </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">required</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#0000FF;--shiki-dark:#D19A66;"> true</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">message</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &#39;请选择预约开始时间!&#39;</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;"> }]</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">	&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">DatePicker</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> showTime</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> style</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">{ </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">width</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &#39;100%&#39;</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;"> }</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> placeholder</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;请选择预约开始时间!&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;"> /&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Item</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">DatePicker</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> defaultValue</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">moment</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&#39;2015/01&#39;</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">monthFormat</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">)</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> format</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">monthFormat</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> picker</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;month&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;"> /&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><p>DatePickers的placeholder是英文的，自定义即可</p><div class="language-html vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;</span><span style="--shiki-light:#CD3131;--shiki-dark:#E06C75;">DatePicker.RangePicker</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> placeholder</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">{[</span><span style="--shiki-light:#CD3131;--shiki-dark:#FFFFFF;">&#39;开始日期&#39;,</span><span style="--shiki-light:#CD3131;--shiki-dark:#FFFFFF;"> &#39;结束日期&#39;]}</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;"> /&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h4 id="时间转化" tabindex="-1"><strong>时间转化：</strong> <a class="header-anchor" href="#时间转化" aria-label="Permalink to &quot;**时间转化：**&quot;">​</a></h4><p>后端返回时间类型是：2022-07-27T14:24:01+08:00，前端进行转化：</p><p>1）首先写一个转换函数：</p><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">// 时间戳转换时间格式</span></span>
<span class="line"><span style="--shiki-light:#AF00DB;--shiki-dark:#C678DD;">export</span><span style="--shiki-light:#AF00DB;--shiki-dark:#C678DD;"> default</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;"> function</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;"> formatDate</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">time</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">) {</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;">	Date</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">parse</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">time</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">)</span></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">	const</span><span style="--shiki-light:#0070C1;--shiki-dark:#E5C07B;"> date</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> =</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;"> new</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;"> Date</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">time</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">);</span></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">	const</span><span style="--shiki-light:#0070C1;--shiki-dark:#E5C07B;"> YY</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> =</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> `</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">${</span><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;">date</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">getFullYear</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">()</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">-`</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">	const</span><span style="--shiki-light:#0070C1;--shiki-dark:#E5C07B;"> MM</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> =</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> `</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">${</span><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;">date</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">getMonth</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">() </span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">+</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 1</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> &lt;</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 10</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> ?</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> `0</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">${</span><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;">date</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">getMonth</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">() </span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">+</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 1</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">`</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> :</span><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;"> date</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">getMonth</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">() </span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">+</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 1</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">-`</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">	const</span><span style="--shiki-light:#0070C1;--shiki-dark:#E5C07B;"> DD</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> =</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> (</span><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;">date</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">getDate</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">() </span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">&lt;</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 10</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> ?</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> `0</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">${</span><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;">date</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">getDate</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">()</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">`</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> :</span><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;"> date</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">getDate</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">());</span></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">	const</span><span style="--shiki-light:#0070C1;--shiki-dark:#E5C07B;"> hh</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> =</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> `</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">${</span><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;">date</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">getHours</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">() </span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">&lt;</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 10</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> ?</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> `0</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">${</span><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;">date</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">getHours</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">()</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">`</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> :</span><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;"> date</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">getHours</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">()</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">:`</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">	const</span><span style="--shiki-light:#0070C1;--shiki-dark:#E5C07B;"> mm</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> =</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> `</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">${</span><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;">date</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">getMinutes</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">() </span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">&lt;</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 10</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> ?</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> `0</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">${</span><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;">date</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">getMinutes</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">()</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">`</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> :</span><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;"> date</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">getMinutes</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">()</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">:`</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">	const</span><span style="--shiki-light:#0070C1;--shiki-dark:#E5C07B;"> ss</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> =</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> (</span><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;">date</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">getSeconds</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">() </span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">&lt;</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 10</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> ?</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> `0</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">${</span><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;">date</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">getSeconds</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">()</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">`</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> :</span><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;"> date</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">getSeconds</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">());</span></span>
<span class="line"><span style="--shiki-light:#AF00DB;--shiki-dark:#C678DD;">	return</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> `</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">${</span><span style="--shiki-light:#0070C1;--shiki-dark:#E5C07B;">YY</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> +</span><span style="--shiki-light:#0070C1;--shiki-dark:#E5C07B;"> MM</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> +</span><span style="--shiki-light:#0070C1;--shiki-dark:#E5C07B;"> DD</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;"> ${</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">hh</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}${</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">mm</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}${</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">ss</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">`</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><div class="language-text vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">text</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>import formatDate from &#39;@/hooks/setTimeFormat&#39;</span></span>
<span class="line"><span></span></span>
<span class="line"><span>formatDate(2022-07-27T14:24:01+08:00)  即可转换</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p><strong>不带毫秒数的时间戳</strong><br> format前要先unix为标准格式， moment.unix(int类型)。<br> 多个时间方法调用：</p><div class="language-ts vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">const</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;"> formatDate</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> =</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> (</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">timeTs</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">formatter</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> =</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &#39;YYYY-MM-DD HH:mm:ss&#39;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">) </span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">=&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> (</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">	!</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">timeTs</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> ?</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &#39;&#39;</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> :</span><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;"> moment</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">unix</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">parseInt</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">timeTs</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">10</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">)).</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">format</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">formatter</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">)</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">);</span></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">const</span><span style="--shiki-light:#0070C1;--shiki-dark:#E5C07B;"> planEndTime</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> =</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;"> formatDate</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;">stateSit</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">planEndTime</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">);</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h2 id="textarea" tabindex="-1">TextArea <a class="header-anchor" href="#textarea" aria-label="Permalink to &quot;TextArea&quot;">​</a></h2><p>样式以及固定高度设置 固定高度使用： <code>row={5}</code></p><div class="language-text vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">text</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span></span></span>
<span class="line"><span>&lt;TextArea style={{ width: &#39;100%&#39;, resize: &#39;none&#39; }} rows={5} /&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h2 id="checkbox-group" tabindex="-1">checkbox.Group <a class="header-anchor" href="#checkbox-group" aria-label="Permalink to &quot;checkbox.Group&quot;">​</a></h2><h3 id="checkbox-group通过options传递数据。如何精准的控制单个checkbox的状态" tabindex="-1">checkbox.Group通过options传递数据。如何精准的控制单个checkbox的状态？ <a class="header-anchor" href="#checkbox-group通过options传递数据。如何精准的控制单个checkbox的状态" aria-label="Permalink to &quot;checkbox.Group通过options传递数据。如何精准的控制单个checkbox的状态？&quot;">​</a></h3><p>如下图：勾选checkbox的时候同步显示标签。对应的checkbox同步状态更改 <img src="/long-press/assets/6a522f4e.BoqyA7qI.png" alt=""> 一开始想到改造原始数据，给每个数据添加一个isChecked状态来控制其选中状态，但是发现在checkbox的change事件里通过e.target.check值和当前值无法同步。 后来改变了思路。还是利用checkbox.Group能自动获取到选中的checkbox数组的特征，通过把checkbox变成受控组件来实现。基本实现逻辑如下</p><div class="language-jsx vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">jsx</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#AF00DB;--shiki-dark:#C678DD;">import</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;"> React</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, { </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">useState</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">forwardRef</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">useImperativeHandle</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">useRef</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">useEffect</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> } </span><span style="--shiki-light:#AF00DB;--shiki-dark:#C678DD;">from</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &#39;react&#39;</span></span>
<span class="line"><span style="--shiki-light:#AF00DB;--shiki-dark:#C678DD;">import</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> { </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">Modal</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">Checkbox</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">Tag</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">List</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> } </span><span style="--shiki-light:#AF00DB;--shiki-dark:#C678DD;">from</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &quot;antd&quot;</span></span>
<span class="line"><span style="--shiki-light:#AF00DB;--shiki-dark:#C678DD;">import</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &quot;./quotaModalStyles/createCatagoryAttrs.less&quot;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">const</span><span style="--shiki-light:#0070C1;--shiki-dark:#E5C07B;"> data</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> =</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> [</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">	{ </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">value</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &#39;001&#39;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">label</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &quot;把&quot;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> },</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">	{ </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">value</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &#39;002&#39;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">label</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &quot;个&quot;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> },</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">	{ </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">value</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &#39;003&#39;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">label</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &quot;块&quot;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> },</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">	{ </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">value</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &#39;004&#39;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">label</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &quot;打&quot;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> },</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">	{ </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">value</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &#39;005&#39;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">label</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &quot;批&quot;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> },</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">]</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">function</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;"> Dialog</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">props</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">ref</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">) {</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">	const</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> { </span><span style="--shiki-light:#0070C1;--shiki-dark:#E5C07B;">confirmFn</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> } </span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;"> props</span></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">	const</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> [</span><span style="--shiki-light:#0070C1;--shiki-dark:#E5C07B;">visible</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#0070C1;--shiki-dark:#E5C07B;">setVisible</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">] </span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;"> useState</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#0000FF;--shiki-dark:#D19A66;">false</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">)</span></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">	const</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> [</span><span style="--shiki-light:#0070C1;--shiki-dark:#E5C07B;">list</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#0070C1;--shiki-dark:#E5C07B;">setList</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">] </span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;"> useState</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">data</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">)</span></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">	const</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> [</span><span style="--shiki-light:#0070C1;--shiki-dark:#E5C07B;">checkedList</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#0070C1;--shiki-dark:#E5C07B;">setCheckedList</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">] </span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;"> useState</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">([])</span></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">	const</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> [</span><span style="--shiki-light:#0070C1;--shiki-dark:#E5C07B;">arr</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#0070C1;--shiki-dark:#E5C07B;">setArr</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">] </span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;"> useState</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">([])</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">	//lifecycle</span></span>
<span class="line"><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">	useEffect</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(() </span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">=&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">		let</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;"> temp</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> =</span><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;"> data</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">map</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">item</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;"> =&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> ({ ...</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">item</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">isChecked</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#0000FF;--shiki-dark:#D19A66;"> false</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> }))</span></span>
<span class="line"><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">		setList</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">temp</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">)</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">	}, [])</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">	//methods--</span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">	// modal的显示与隐藏</span></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">	const</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;"> showModal</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> =</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> () </span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">=&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">		setVisible</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#0000FF;--shiki-dark:#D19A66;">true</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">)</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">	}</span></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">	const</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;"> hideModal</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> =</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> () </span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">=&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">		setVisible</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#0000FF;--shiki-dark:#D19A66;">false</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">)</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">	}</span></span>
<span class="line"><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">	useImperativeHandle</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">ref</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, () </span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">=&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> ({</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">		showModelRef</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;"> showModal</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">,</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">		hideModelRef</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;"> hideModal</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">	}))</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">	const</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;"> handleClose</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> =</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> () </span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">=&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">		hideModal</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">();</span></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">		let</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;"> num</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> =</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 100</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;">		console</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">log</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;close&quot;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">)</span></span>
<span class="line"><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">		confirmFn</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">num</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">)</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">	}</span></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">	const</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;"> selectedItem</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> =</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> (</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">values</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">) </span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">=&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;">		console</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">log</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;values:&quot;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">values</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">)</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;">		console</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">log</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;arr:&quot;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">arr</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">)</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">		setArr</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">values</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">)</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;">		console</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">log</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;b--:&quot;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">b</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">)</span></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">		let</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;"> b</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> =</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> [];</span></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">		let</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;"> temp</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> =</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;"> values</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;">		list</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">forEach</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">item</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;"> =&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#AF00DB;--shiki-dark:#C678DD;">			for</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> (</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">let</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;"> j</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> =</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 0</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">; </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">j</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> &lt;</span><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;"> temp</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">length</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">; </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">j</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">++</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">) {</span></span>
<span class="line"><span style="--shiki-light:#AF00DB;--shiki-dark:#C678DD;">				if</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> (</span><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;">item</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">value</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> ===</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;"> temp</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">[</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">j</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">]) {</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;">					b</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">push</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">item</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">)</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">				}</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">			}</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">		})</span></span>
<span class="line"><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">		setCheckedList</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">b</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">)</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">	}</span></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">	const</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;"> closeTag</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> =</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> (</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">tag</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">) </span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">=&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;">		console</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">log</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;closeTag-tag-:&quot;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">tag</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">)</span></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">		let</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;"> tags</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> =</span><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;"> checkedList</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">filter</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">item</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;"> =&gt;</span><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;"> item</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">value</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> !==</span><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;"> tag</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">value</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">)</span></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">		let</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;"> res</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> =</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> [];</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;">		tags</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">forEach</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">item</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;"> =&gt;</span><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;"> res</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">push</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;">item</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">value</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">))</span></span>
<span class="line"><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">		setArr</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">res</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">)</span></span>
<span class="line"><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">		setCheckedList</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">tags</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">)</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">	}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#AF00DB;--shiki-dark:#C678DD;">	return</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> (</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">		&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Modal</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">			icon</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;&quot;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">			title</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;设置属性值&quot;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">			width</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">670</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">			footer</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#0000FF;--shiki-dark:#D19A66;">null</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">			visible</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">visible</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">			centered</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#0000FF;--shiki-dark:#D19A66;">true</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">			maskClosable</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#0000FF;--shiki-dark:#D19A66;">false</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">			onCancel</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">handleClose</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">			destroyOnClose</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#0000FF;--shiki-dark:#D19A66;">true</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">		&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">			&lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> className</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&#39;create-catagory-attrs-modal&#39;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">				{</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Checkbox.Group</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">					onChange</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">selectedItem</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">					value</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">arr</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">					options</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">list</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">				&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">				&lt;/</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Checkbox.Group</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">				}</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">				&lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> className</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;tag-box&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">					{</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;">						checkedList</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">map</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">item</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;"> =&gt;</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;"> (</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">							&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Tag</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> closable</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> onClose</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">() </span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">=&gt;</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;"> closeTag</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">item</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">)</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">								{</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;">									item</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">label</span></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">								}</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">							&lt;/</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Tag</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">						))</span></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">					}</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">				&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">			&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">		&lt;/</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Modal</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">	)</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#AF00DB;--shiki-dark:#C678DD;">export</span><span style="--shiki-light:#AF00DB;--shiki-dark:#C678DD;"> default</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;"> forwardRef</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">Dialog</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">)</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br><span class="line-number">74</span><br><span class="line-number">75</span><br><span class="line-number">76</span><br><span class="line-number">77</span><br><span class="line-number">78</span><br><span class="line-number">79</span><br><span class="line-number">80</span><br><span class="line-number">81</span><br><span class="line-number">82</span><br><span class="line-number">83</span><br><span class="line-number">84</span><br><span class="line-number">85</span><br><span class="line-number">86</span><br><span class="line-number">87</span><br><span class="line-number">88</span><br><span class="line-number">89</span><br><span class="line-number">90</span><br><span class="line-number">91</span><br><span class="line-number">92</span><br><span class="line-number">93</span><br><span class="line-number">94</span><br><span class="line-number">95</span><br><span class="line-number">96</span><br><span class="line-number">97</span><br><span class="line-number">98</span><br><span class="line-number">99</span><br><span class="line-number">100</span><br><span class="line-number">101</span><br><span class="line-number">102</span><br><span class="line-number">103</span><br><span class="line-number">104</span><br><span class="line-number">105</span><br><span class="line-number">106</span><br><span class="line-number">107</span><br><span class="line-number">108</span><br><span class="line-number">109</span><br><span class="line-number">110</span><br><span class="line-number">111</span><br></div></div><p>注意这里我们给checkbox.Group的value赋值给一个数组，所谓受控组件：就是checkbox本身的状态受控于数据arr而不是再根据用户本身是否勾选来控制了。 而checkbox.Group的value被绑定到了arr。 arr表示被选中的数组列表，这样就意味着哪些数据被勾选了，当前就应该哪些被勾选</p><h1 id="form-item相关" tabindex="-1">Form.Item相关 <a class="header-anchor" href="#form-item相关" aria-label="Permalink to &quot;Form.Item相关&quot;">​</a></h1><h2 id="form-item-带上name的表示为受控组件-不能通过onchange直接赋值" tabindex="-1">form.item 带上name的表示为受控组件，不能通过onChange直接赋值 <a class="header-anchor" href="#form-item-带上name的表示为受控组件-不能通过onchange直接赋值" aria-label="Permalink to &quot;form.item 带上name的表示为受控组件，不能通过onChange直接赋值&quot;">​</a></h2><h2 id="form-item支持嵌套-但是一个form-item只能包裹一个输入" tabindex="-1">Form.item支持嵌套，但是一个Form.item只能包裹一个输入 <a class="header-anchor" href="#form-item支持嵌套-但是一个form-item只能包裹一个输入" aria-label="Permalink to &quot;Form.item支持嵌套，但是一个Form.item只能包裹一个输入&quot;">​</a></h2><h2 id="如果你需要-antd-样式的label-可以通过外部包裹-form-item-来实现" tabindex="-1">如果你需要 antd 样式的<code>label</code>，可以通过外部包裹 Form.Item 来实现 <a class="header-anchor" href="#如果你需要-antd-样式的label-可以通过外部包裹-form-item-来实现" aria-label="Permalink to &quot;如果你需要 antd 样式的`label`，可以通过外部包裹 Form.Item 来实现&quot;">​</a></h2><h2 id="form-item如果包裹checkbox-switch-需要添加属性-valuepropname-checked" tabindex="-1">Form.item如果包裹CheckBox\Switch，需要添加属性 valuePropName=&quot;checked&quot; <a class="header-anchor" href="#form-item如果包裹checkbox-switch-需要添加属性-valuepropname-checked" aria-label="Permalink to &quot;Form.item如果包裹CheckBox\Switch，需要添加属性 valuePropName=&quot;checked&quot;&quot;">​</a></h2><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>&lt;Form.Item&gt;</span></span>
<span class="line"><span>    &lt;Form.Item name=&quot;remember&quot; valuePropName=&quot;checked&quot; noStyle&gt;</span></span>
<span class="line"><span>      &lt;Checkbox&gt;Remember me&lt;/Checkbox&gt;</span></span>
<span class="line"><span>    &lt;/Form.Item&gt;</span></span>
<span class="line"><span></span></span>
<span class="line"><span>    &lt;a className=&quot;login-form-forgot&quot; href=&quot;&quot;&gt;</span></span>
<span class="line"><span>      Forgot password</span></span>
<span class="line"><span>    &lt;/a&gt;</span></span>
<span class="line"><span>&lt;/Form.Item&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h2 id="form-item-nostyle" tabindex="-1">Form.Item noStyle <a class="header-anchor" href="#form-item-nostyle" aria-label="Permalink to &quot;Form.Item noStyle&quot;">​</a></h2><p>多用于嵌套Form.Item的场景中</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>&lt;Form.Item label=&quot;导出路径&quot; {...filePathItemRadioLayout}&gt;</span></span>
<span class="line"><span>    &lt;Input.Group compact&gt;</span></span>
<span class="line"><span>            &lt;Form.Item</span></span>
<span class="line"><span>                    name={&#39;filePath&#39;}</span></span>
<span class="line"><span>                    noStyle</span></span>
<span class="line"><span>                    rules={[{required: true, message: &#39;请选择导出文件路径&#39;}]}</span></span>
<span class="line"><span>            &gt;</span></span>
<span class="line"><span>                    &lt;Input style={{width: &#39;calc(100% - 66px)&#39;}} /&gt;</span></span>
<span class="line"><span>            &lt;/Form.Item&gt;</span></span>
<span class="line"><span>            &lt;Button onClick={handleSelectPath}&gt;选择&lt;/Button&gt;</span></span>
<span class="line"><span>    &lt;/Input.Group&gt;</span></span>
<span class="line"><span>&lt;/Form.Item&gt;</span></span>
<span class="line"><span></span></span>
<span class="line"><span>&lt;Form.Item label=&quot;InputNumber&quot;&gt;</span></span>
<span class="line"><span>    &lt;Form.Item name=&quot;input-number&quot; noStyle&gt;</span></span>
<span class="line"><span>      &lt;InputNumber min={1} max={10} /&gt;</span></span>
<span class="line"><span>    &lt;/Form.Item&gt;</span></span>
<span class="line"><span>    &lt;span className=&quot;ant-form-text&quot;&gt; machines&lt;/span&gt;</span></span>
<span class="line"><span>&lt;/Form.Item&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div><h2 id="form-getfieldvalue" tabindex="-1">form.getFieldValue <a class="header-anchor" href="#form-getfieldvalue" aria-label="Permalink to &quot;form.getFieldValue&quot;">​</a></h2><p>可以在form.item内部使用getFieldValue，获取对应字段名的值</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>&lt;Form.Item</span></span>
<span class="line"><span>      label=&quot;User List&quot;</span></span>
<span class="line"><span>      shouldUpdate={(prevValues, curValues) =&gt; prevValues.users !== curValues.users}</span></span>
<span class="line"><span>    &gt;</span></span>
<span class="line"><span>  {({ getFieldValue }) =&gt; {</span></span>
<span class="line"><span>    const users: UserType[] = getFieldValue(&#39;users&#39;) || [];</span></span>
<span class="line"><span>    return users.length ? (</span></span>
<span class="line"><span>      &lt;ul&gt;</span></span>
<span class="line"><span>        {users.map((user, index) =&gt; (</span></span>
<span class="line"><span>          &lt;li key={index} className=&quot;user&quot;&gt;</span></span>
<span class="line"><span>            &lt;Avatar icon={&lt;UserOutlined /&gt;} /&gt;</span></span>
<span class="line"><span>            {user.name} - {user.age}</span></span>
<span class="line"><span>          &lt;/li&gt;</span></span>
<span class="line"><span>        ))}</span></span>
<span class="line"><span>      &lt;/ul&gt;</span></span>
<span class="line"><span>    ) : (</span></span>
<span class="line"><span>      &lt;Typography.Text className=&quot;ant-form-text&quot; type=&quot;secondary&quot;&gt;</span></span>
<span class="line"><span>        ( &lt;SmileOutlined /&gt; No user yet. )</span></span>
<span class="line"><span>      &lt;/Typography.Text&gt;</span></span>
<span class="line"><span>    );</span></span>
<span class="line"><span>  }}</span></span>
<span class="line"><span>&lt;/Form.Item&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br></div></div><p>确认密码：首先保证必填； 其次若值与密码一致，则返回成功</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>&lt;Form.Item</span></span>
<span class="line"><span>   name=&quot;confirm&quot;</span></span>
<span class="line"><span>   label=&quot;Confirm Password&quot;</span></span>
<span class="line"><span>   dependencies={[&#39;password&#39;]}</span></span>
<span class="line"><span>   hasFeedback</span></span>
<span class="line"><span>   rules={[</span></span>
<span class="line"><span>     {</span></span>
<span class="line"><span>       required: true,</span></span>
<span class="line"><span>       message: &#39;Please confirm your password!&#39;,</span></span>
<span class="line"><span>     },</span></span>
<span class="line"><span>     ({ getFieldValue }) =&gt; ({</span></span>
<span class="line"><span>       validator(_, value) {</span></span>
<span class="line"><span>         if (!value || getFieldValue(&#39;password&#39;) === value) {</span></span>
<span class="line"><span>           return Promise.resolve();</span></span>
<span class="line"><span>         }</span></span>
<span class="line"><span>         return Promise.reject(new Error(&#39;The two passwords that you entered do not match!&#39;));</span></span>
<span class="line"><span>       },</span></span>
<span class="line"><span>     }),</span></span>
<span class="line"><span>   ]}</span></span>
<span class="line"><span> &gt;</span></span>
<span class="line"><span>   &lt;Input.Password /&gt;</span></span>
<span class="line"><span>&lt;/Form.Item&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br></div></div><h2 id="form-item-设置-shouldupdate-自定义字段更新逻辑" tabindex="-1">Form.item 设置 shouldUpdate 自定义字段更新逻辑 <a class="header-anchor" href="#form-item-设置-shouldupdate-自定义字段更新逻辑" aria-label="Permalink to &quot;Form.item 设置 shouldUpdate 自定义字段更新逻辑&quot;">​</a></h2><p>Form 通过增量更新方式，只更新被修改的字段相关组件以达到性能优化目的。 大部分场景下，你只需要编写代码或者与<a href="https://4x.ant.design/components/form-cn/#dependencies" target="_blank" rel="noreferrer"><code>dependencies</code></a>属性配合校验即可。 而在某些特定场景，例如修改某个字段值后出现新的字段选项、或者纯粹希望表单任意变化都对某一个区域进行渲染。你可以通过<code>shouldUpdate</code> 修改 Form.Item 的更新逻辑。</p><p>当<code>shouldUpdate</code>为<code>true</code>时，Form 的任意变化都会使该 Form.Item 重新渲染。 这对于自定义渲染一些区域十分有帮助：</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>&lt;Form.Item shouldUpdate&gt;</span></span>
<span class="line"><span>  {() =&gt; {</span></span>
<span class="line"><span>    return &lt;pre&gt;{JSON.stringify(form.getFieldsValue(), null, 2)}&lt;/pre&gt;;</span></span>
<span class="line"><span>  }}</span></span>
<span class="line"><span>&lt;/Form.Item&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>当<code>shouldUpdate</code>为方法时，表单的每次数值更新都会调用该方法，提供原先的值与当前的值以供你比较是否需要更新。这对于是否根据值来渲染额外字段十分有帮助：</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>&lt;Form.Item shouldUpdate={(prevValues, curValues) =&gt; prevValues.additional !== curValues.additional}&gt;</span></span>
<span class="line"><span>  {() =&gt; {</span></span>
<span class="line"><span>    return (</span></span>
<span class="line"><span>      &lt;Form.Item name=&quot;other&quot;&gt;</span></span>
<span class="line"><span>        &lt;Input /&gt;</span></span>
<span class="line"><span>      &lt;/Form.Item&gt;</span></span>
<span class="line"><span>    );</span></span>
<span class="line"><span>  }}</span></span>
<span class="line"><span>&lt;/Form.Item&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h2 id="form-item-row-col" tabindex="-1">Form.Item Row Col <a class="header-anchor" href="#form-item-row-col" aria-label="Permalink to &quot;Form.Item Row Col&quot;">​</a></h2><p><img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/92e00ae0d15c485b9e5746052a39c14d~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=455&amp;h=86&amp;s=3568&amp;e=png&amp;b=fefefe" alt="image.png"></p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>&lt;Form.Item label=&quot;Captcha&quot; extra=&quot;We must make sure that your are a human.&quot;&gt;</span></span>
<span class="line"><span>    &lt;Row gutter={8}&gt;</span></span>
<span class="line"><span>      &lt;Col span={12}&gt;</span></span>
<span class="line"><span>        &lt;Form.Item</span></span>
<span class="line"><span>          name=&quot;captcha&quot;</span></span>
<span class="line"><span>          noStyle</span></span>
<span class="line"><span>          rules={[{ required: true, message: &#39;Please input the captcha you got!&#39; }]}</span></span>
<span class="line"><span>        &gt;</span></span>
<span class="line"><span>          &lt;Input /&gt;</span></span>
<span class="line"><span>        &lt;/Form.Item&gt;</span></span>
<span class="line"><span>      &lt;/Col&gt;</span></span>
<span class="line"><span>      &lt;Col span={12}&gt;</span></span>
<span class="line"><span>        &lt;Button&gt;Get captcha&lt;/Button&gt;</span></span>
<span class="line"><span>      &lt;/Col&gt;</span></span>
<span class="line"><span>    &lt;/Row&gt;</span></span>
<span class="line"><span>&lt;/Form.Item&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><h2 id="labelcol的使用-是一个对象-可以根据span和offset的比例可以来调整标签布局" tabindex="-1">labelCol的使用：是一个对象，可以根据span和offset的比例可以来调整标签布局 <a class="header-anchor" href="#labelcol的使用-是一个对象-可以根据span和offset的比例可以来调整标签布局" aria-label="Permalink to &quot;labelCol的使用：是一个对象，可以根据span和offset的比例可以来调整标签布局&quot;">​</a></h2><p span:="" 3,="" offset:="" 12="">label 标签布局，同 <code>&lt;Col&gt;</code> 组件，设置 span offset 值，如 {span: 3, offset: 12} 或 sm:</p><h2 id="form-item-设置tooltip" tabindex="-1">Form.Item 设置tooltip <a class="header-anchor" href="#form-item-设置tooltip" aria-label="Permalink to &quot;Form.Item 设置tooltip&quot;">​</a></h2><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1add1bbdeeaf405c894b98d99a2788c5~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=273&amp;h=175&amp;s=5310&amp;e=png&amp;b=fefdfd" alt="image.png"></p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>&lt;Form.Item label=&quot;Field A&quot; required tooltip=&quot;This is a required field&quot;&gt;</span></span>
<span class="line"><span>        &lt;Input placeholder=&quot;input placeholder&quot; /&gt;</span></span>
<span class="line"><span>&lt;/Form.Item&gt;</span></span>
<span class="line"><span>&lt;Form.Item</span></span>
<span class="line"><span>    label=&quot;Field B&quot;</span></span>
<span class="line"><span>    tooltip={{ title: &#39;Tooltip with customize icon&#39;, icon: &lt;InfoCircleOutlined /&gt; }}</span></span>
<span class="line"><span>  &gt;</span></span>
<span class="line"><span>    &lt;Input placeholder=&quot;input placeholder&quot; /&gt;</span></span>
<span class="line"><span>&lt;/Form.Item&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h2 id="form-item是-文件上传的话-valuepropname-filelist" tabindex="-1">Form.Item是 文件上传的话， valuePropName=&quot;fileList&quot; <a class="header-anchor" href="#form-item是-文件上传的话-valuepropname-filelist" aria-label="Permalink to &quot;Form.Item是 文件上传的话， valuePropName=&quot;fileList&quot;&quot;">​</a></h2><p>getValueFromEvent 设置如何将 event 的值转换成字段值</p><div class="language-ts vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">const</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;"> normFile</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> =</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> (</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">e</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">any</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">) </span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">=&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;">	console</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">log</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&#39;Upload event:&#39;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">e</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">);</span></span>
<span class="line"><span style="--shiki-light:#AF00DB;--shiki-dark:#C678DD;">	if</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> (</span><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;">Array</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">isArray</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">e</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">)) {</span></span>
<span class="line"><span style="--shiki-light:#AF00DB;--shiki-dark:#C678DD;">		return</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;"> e</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">	}</span></span>
<span class="line"><span style="--shiki-light:#AF00DB;--shiki-dark:#C678DD;">	return</span><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;"> e</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">?.</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">fileList</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">};</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>&lt;Form.Item</span></span>
<span class="line"><span>    name=&quot;upload&quot;</span></span>
<span class="line"><span>    label=&quot;Upload&quot;</span></span>
<span class="line"><span>    valuePropName=&quot;fileList&quot;</span></span>
<span class="line"><span>    getValueFromEvent={normFile}</span></span>
<span class="line"><span>    extra=&quot;longgggggggggggggggggggggggggggggggggg&quot;</span></span>
<span class="line"><span>  &gt;</span></span>
<span class="line"><span>    &lt;Upload name=&quot;logo&quot; action=&quot;/upload.do&quot; listType=&quot;picture&quot;&gt;</span></span>
<span class="line"><span>      &lt;Button icon={&lt;UploadOutlined /&gt;}&gt;Click to upload&lt;/Button&gt;</span></span>
<span class="line"><span>    &lt;/Upload&gt;</span></span>
<span class="line"><span>&lt;/Form.Item&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h2 id="自动提示-autocomplete" tabindex="-1">自动提示 AutoComplete <a class="header-anchor" href="#自动提示-autocomplete" aria-label="Permalink to &quot;自动提示 AutoComplete&quot;">​</a></h2><div class="language-ts vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">const</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> [</span><span style="--shiki-light:#0070C1;--shiki-dark:#E5C07B;">autoCompleteResult</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#0070C1;--shiki-dark:#E5C07B;">setAutoCompleteResult</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">] </span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;"> useState</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">string</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">[]&gt;([]);</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">const</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;"> onWebsiteChange</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> =</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> (</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">value</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">string</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">) </span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">=&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#AF00DB;--shiki-dark:#C678DD;">	if</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> (</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">!</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">value</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">) {</span></span>
<span class="line"><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">		setAutoCompleteResult</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">([]);</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">	} </span><span style="--shiki-light:#AF00DB;--shiki-dark:#C678DD;">else</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">		setAutoCompleteResult</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">([</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&#39;.com&#39;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&#39;.org&#39;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&#39;.net&#39;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">].</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">map</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">domain</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;"> =&gt;</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> `</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">${</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">value</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}${</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">domain</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">`</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">));</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">	}</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">};</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">const</span><span style="--shiki-light:#0070C1;--shiki-dark:#E5C07B;"> websiteOptions</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> =</span><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;"> autoCompleteResult</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">map</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">website</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;"> =&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> ({</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">	label</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;"> website</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">,</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">	value</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;"> website</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">,</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}));</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><div class="language-tsx vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Form.Item</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">	name</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;website&quot;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">	label</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;Website&quot;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">	rules</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">[{ </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">required</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#0000FF;--shiki-dark:#D19A66;"> true</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">message</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &#39;Please input website!&#39;</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;"> }]</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">	&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">AutoComplete</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> options</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">websiteOptions</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> onChange</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">onWebsiteChange</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> placeholder</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;website&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">		&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Input</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;"> /&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">	&lt;/</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">AutoComplete</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Form.Item</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h1 id="表单校验" tabindex="-1">表单校验 <a class="header-anchor" href="#表单校验" aria-label="Permalink to &quot;表单校验&quot;">​</a></h1><h2 id="form-item-设置的rules是一个数组" tabindex="-1">Form.Item 设置的rules是一个数组 <a class="header-anchor" href="#form-item-设置的rules是一个数组" aria-label="Permalink to &quot;Form.Item 设置的rules是一个数组&quot;">​</a></h2><div class="language-tsx vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;"> &lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Form.Item</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">	name</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;email&quot;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">	label</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;E-mail&quot;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">	rules</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">[</span></span>
<span class="line"><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">		{</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">			type</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &#39;email&#39;</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">,</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">			message</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &#39;The input is not valid E-mail!&#39;</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">,</span></span>
<span class="line"><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">		},</span></span>
<span class="line"><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">		{</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">			required</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#0000FF;--shiki-dark:#D19A66;"> true</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">,</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">			message</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &#39;Please input your E-mail!&#39;</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">,</span></span>
<span class="line"><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">		},</span></span>
<span class="line"><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">	]</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">	&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Input</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;"> /&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Form.Item</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><h2 id="whitespace-true-如果字段仅包含空格则校验不通过-只在type-string-时生效" tabindex="-1">whitespace: true 如果字段仅包含空格则校验不通过，只在<code>type: &#39;string&#39;</code>时生效 <a class="header-anchor" href="#whitespace-true-如果字段仅包含空格则校验不通过-只在type-string-时生效" aria-label="Permalink to &quot;whitespace: true 如果字段仅包含空格则校验不通过，只在`type: &#39;string&#39;`时生效&quot;">​</a></h2><div class="language-tsx vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;"> &lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Form.Item</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">	name</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;nickname&quot;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">	label</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;Nickname&quot;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">	tooltip</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;What do you want others to call you?&quot;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">	rules</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">[{ </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">required</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#0000FF;--shiki-dark:#D19A66;"> true</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">message</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &#39;Please input your nickname!&#39;</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">whitespace</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#0000FF;--shiki-dark:#D19A66;"> true</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;"> }]</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">	&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Input</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;"> /&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Form.Item</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h2 id="自定义-validator" tabindex="-1">自定义 validator <a class="header-anchor" href="#自定义-validator" aria-label="Permalink to &quot;自定义 validator&quot;">​</a></h2><p><strong>你可以选择通过<code>async</code>返回一个 promise 或者使用<code>try...catch</code>进行错误捕获</strong></p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>validator: async (rule, value) =&gt; {</span></span>
<span class="line"><span>  throw new Error(&#39;Something wrong!&#39;);</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span></span></span>
<span class="line"><span>// or</span></span>
<span class="line"><span></span></span>
<span class="line"><span>validator(rule, value, callback) =&gt; {</span></span>
<span class="line"><span>  try {</span></span>
<span class="line"><span>    throw new Error(&#39;Something wrong!&#39;);</span></span>
<span class="line"><span>  } catch (err) {</span></span>
<span class="line"><span>    callback(err);</span></span>
<span class="line"><span>  }</span></span>
<span class="line"><span>}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><h2 id="form-item-dependencies-设置依赖字段" tabindex="-1">Form.Item dependencies 设置依赖字段 <a class="header-anchor" href="#form-item-dependencies-设置依赖字段" aria-label="Permalink to &quot;Form.Item  dependencies 设置依赖字段&quot;">​</a></h2><p>当字段间存在依赖关系时使用。如果一个字段设置了<code>dependencies</code>属性。 那么它所依赖的字段更新时，该字段将自动触发更新与校验。 一种常见的场景，就是注册用户表单的“密码”与“确认密码”字段。 “确认密码”校验依赖于“密码”字段，设置<code>dependencies</code>后，“密码”字段更新会重新触发“校验密码”的校验逻辑</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>&lt;Form.Item</span></span>
<span class="line"><span>        name=&quot;confirm&quot;</span></span>
<span class="line"><span>        label=&quot;Confirm Password&quot;</span></span>
<span class="line"><span>        dependencies={[&#39;password&#39;]}</span></span>
<span class="line"><span>        hasFeedback</span></span>
<span class="line"><span>        rules={[</span></span>
<span class="line"><span>          {</span></span>
<span class="line"><span>            required: true,</span></span>
<span class="line"><span>            message: &#39;Please confirm your password!&#39;,</span></span>
<span class="line"><span>          },</span></span>
<span class="line"><span>          ({ getFieldValue }) =&gt; ({</span></span>
<span class="line"><span>            validator(_, value) {</span></span>
<span class="line"><span>              if (!value || getFieldValue(&#39;password&#39;) === value) {</span></span>
<span class="line"><span>                return Promise.resolve();</span></span>
<span class="line"><span>              }</span></span>
<span class="line"><span>              return Promise.reject(new Error(&#39;The two passwords that you entered do not match!&#39;));</span></span>
<span class="line"><span>            },</span></span>
<span class="line"><span>          }),</span></span>
<span class="line"><span>        ]}</span></span>
<span class="line"><span>      &gt;</span></span>
<span class="line"><span>        &lt;Input.Password /&gt;</span></span>
<span class="line"><span>&lt;/Form.Item&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br></div></div><p><code>dependencies</code>不应和<code>shouldUpdate</code>一起使用，因为这可能带来更新逻辑的混乱。</p><h2 id="hasfeedback-配合-validatestatus-属性使用-展示校验状态图标-建议只配合-input-组件使用" tabindex="-1">hasFeedback 配合 validateStatus 属性使用，展示校验状态图标，建议只配合 Input 组件使用 <a class="header-anchor" href="#hasfeedback-配合-validatestatus-属性使用-展示校验状态图标-建议只配合-input-组件使用" aria-label="Permalink to &quot;hasFeedback 配合 validateStatus 属性使用，展示校验状态图标，建议只配合 Input 组件使用&quot;">​</a></h2><p><img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/58058ec213594b728c6970b089ca9e3f~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=742&amp;h=797&amp;s=51993&amp;e=png&amp;b=fefefe" alt="image.png"></p><h2 id="校验项是数组" tabindex="-1">校验项是数组 <a class="header-anchor" href="#校验项是数组" aria-label="Permalink to &quot;校验项是数组&quot;">​</a></h2><div class="language-tsx vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Form.Item</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">	name</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;residence&quot;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">	label</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;Habitual Residence&quot;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">	rules</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">[</span></span>
<span class="line"><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">		{ </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">type</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &#39;array&#39;</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">required</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#0000FF;--shiki-dark:#D19A66;"> true</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">message</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &#39;Please select your habitual residence!&#39;</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;"> },</span></span>
<span class="line"><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">	]</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">	&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Cascader</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> options</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">residences</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;"> /&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Form.Item</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h2 id="手动触发异步校验" tabindex="-1">手动触发异步校验 <a class="header-anchor" href="#手动触发异步校验" aria-label="Permalink to &quot;手动触发异步校验&quot;">​</a></h2><div class="language-tsx vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">const</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;"> onCheck</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> =</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;"> async</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> () </span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">=&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#AF00DB;--shiki-dark:#C678DD;">	try</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">		const</span><span style="--shiki-light:#0070C1;--shiki-dark:#E5C07B;"> values</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> =</span><span style="--shiki-light:#AF00DB;--shiki-dark:#C678DD;"> await</span><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;"> form</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">validateFields</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">();</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;">		console</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">log</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&#39;Success:&#39;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">values</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">);</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">	} </span><span style="--shiki-light:#AF00DB;--shiki-dark:#C678DD;">catch</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> (</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">errorInfo</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">) {</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;">		console</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">log</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&#39;Failed:&#39;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">errorInfo</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">);</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">	}</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">};</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><div class="language-tsx vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;">form</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">validateFields</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">()</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">	.</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">then</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">values</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;"> =&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;">		form</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">resetFields</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">();</span></span>
<span class="line"><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">		onCreate</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">values</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">);</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">	})</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">	.</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">catch</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">info</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;"> =&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;">		console</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">log</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&#39;Validate Failed:&#39;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">info</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">);</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">	});</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h2 id="form-validatefields-返回示例" tabindex="-1">form.validateFields 返回示例 <a class="header-anchor" href="#form-validatefields-返回示例" aria-label="Permalink to &quot;form.validateFields 返回示例&quot;">​</a></h2><div class="language-ts vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">validateFields</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">()</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">	.</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">then</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">values</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;"> =&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">		/*</span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">	values:</span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">		{</span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">			username: &#39;username&#39;,</span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">			password: &#39;password&#39;,</span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">		}</span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">	*/</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">	})</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">	.</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">catch</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">errorInfo</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;"> =&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">		/*</span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">		errorInfo:</span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">			{</span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">				values: {</span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">					username: &#39;username&#39;,</span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">					password: &#39;password&#39;,</span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">				},</span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">				errorFields: [</span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">					{ name: [&#39;password&#39;], errors: [&#39;Please input your Password!&#39;] },</span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">				],</span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">				outOfDate: false,</span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">			}</span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">		*/</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">	});</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br></div></div><h2 id="scrolltofirsterror-scrolltofield-提交失败时自动滚动到指定字段" tabindex="-1">scrollToFirstError || scrollToField-&gt;提交失败时自动滚动到指定字段 <a class="header-anchor" href="#scrolltofirsterror-scrolltofield-提交失败时自动滚动到指定字段" aria-label="Permalink to &quot;scrollToFirstError || scrollToField-&gt;提交失败时自动滚动到指定字段&quot;">​</a></h2><p>① scrollToFirstError</p><p>提交失败自动滚动到第一个错误字段。</p><p>注意：必须使用表单submit提交才会触发。</p><p>② scrollToField</p><p>如果不使用表单submit提交，使用scrollToField滚动到对应字段位置：</p><div class="language-tsx vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">const</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;"> save</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> =</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;"> async</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> () </span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">=&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#AF00DB;--shiki-dark:#C678DD;">	try</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">		const</span><span style="--shiki-light:#0070C1;--shiki-dark:#E5C07B;"> values</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> =</span><span style="--shiki-light:#AF00DB;--shiki-dark:#C678DD;"> await</span><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;"> form</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">validateFields</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">();</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">	} </span><span style="--shiki-light:#AF00DB;--shiki-dark:#C678DD;">catch</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> (</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">errorInfo</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">) {</span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">		// 滚动到第一个错误字段</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;">		form</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">scrollToField</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;">errorInfo</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">errorFields</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">[</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">0</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">].</span><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;">name</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">toString</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(), { </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">block</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &#39;center&#39;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> })</span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">		// form.scrollToField方法可以有第二个入参，传入一个对象，其中block字段可以控制滚动到的位置</span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">		// 可以查看antd文档了解第二个入参的更多信息</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">	}</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h1 id="form相关" tabindex="-1">Form相关 <a class="header-anchor" href="#form相关" aria-label="Permalink to &quot;Form相关&quot;">​</a></h1><h2 id="form-layout-inline-会将每一项输入框在一行进行排列" tabindex="-1">Form layout=&quot;inline&quot; 会将每一项输入框在一行进行排列 <a class="header-anchor" href="#form-layout-inline-会将每一项输入框在一行进行排列" aria-label="Permalink to &quot;Form layout=&quot;inline&quot; 会将每一项输入框在一行进行排列&quot;">​</a></h2><h2 id="const-form-form-useform" tabindex="-1">const [form] = Form.useForm(); <a class="header-anchor" href="#const-form-form-useform" aria-label="Permalink to &quot;const [form] = Form.useForm();&quot;">​</a></h2><p>需要将form关联到Form标签上</p><h2 id="form-setfieldsvalue" tabindex="-1">form.setFieldsValue <a class="header-anchor" href="#form-setfieldsvalue" aria-label="Permalink to &quot;form.setFieldsValue&quot;">​</a></h2><p>支持对象深层次修改单个属性，例如</p><div class="language-tsx vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">const</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;"> toggleAllSelected</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> =</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> (</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">checked</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">boolean</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">) </span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">=&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;">	form</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">setFieldsValue</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">({</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">		originChannel</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> { </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">checked</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> },</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">		extractChromatogram</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> { </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">checked</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> },</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">		extractMassSpectrum</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> { </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">checked</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> },</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">	})</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p>如果在Form表单中onChange事件中，手写了一个setFieldsValue, 则不会生效。 原因是因为： Form表单会在手写的onChange事件之后执行内部的setFieldsValue，所以会将我们之前手写的setFieldsValue给覆盖</p><h2 id="form-resetfields" tabindex="-1">form.resetFields(); <a class="header-anchor" href="#form-resetfields" aria-label="Permalink to &quot;form.resetFields();&quot;">​</a></h2><p>重置一组字段到<code>initialValues</code></p><h2 id="设置确认按钮在表单所有字段未都被触摸过或表单校验有误时禁用" tabindex="-1">设置确认按钮在表单所有字段未都被触摸过或表单校验有误时禁用 <a class="header-anchor" href="#设置确认按钮在表单所有字段未都被触摸过或表单校验有误时禁用" aria-label="Permalink to &quot;设置确认按钮在表单所有字段未都被触摸过或表单校验有误时禁用&quot;">​</a></h2><p>shouldUpdate 表单值改变就要刷新 form.isFieldsTouched(true) 检查一组字段是否被用户操作过，<code>allTouched</code>为<code>true</code>时检查是否所有字段都被操作过 !form.isFieldsTouched(true) 检查是否所有字段没有都被操作过</p><p>form.getFieldsError() 获取一组字段名对应的错误信息，返回为数组形式</p><div class="language-tsx vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;"> &lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Form.Item</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> shouldUpdate</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">	{</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">() </span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">=&gt;</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;"> (</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">		&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Button</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">			type</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;primary&quot;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">			htmlType</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;submit&quot;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">			disabled</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">				!</span><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;">form</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">isFieldsTouched</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#0000FF;--shiki-dark:#D19A66;">true</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">) </span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">||</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">				!!</span><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;">form</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">getFieldsError</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">().</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">filter</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">(({ </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">errors</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;"> }) </span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">=&gt;</span><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;"> errors</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">length</span><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">).</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">length</span></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">			}</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">		&gt;</span></span>
<span class="line"><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">			Log in</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">		&lt;/</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Button</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#000000FF;--shiki-dark:#ABB2BF;">	)</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Form.Item</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><h2 css-module=".tailFormItemLayout" id="formitemlayout" tabindex="-1">{...formItemLayout} <a class="header-anchor" href="#formitemlayout" aria-label="Permalink to &quot;{...formItemLayout} {...tailFormItemLayout}&quot;">​</a></h2><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>const formItemLayout = {</span></span>
<span class="line"><span>  labelCol: {</span></span>
<span class="line"><span>    xs: { span: 24 },</span></span>
<span class="line"><span>    sm: { span: 8 },</span></span>
<span class="line"><span>  },</span></span>
<span class="line"><span>  wrapperCol: {</span></span>
<span class="line"><span>    xs: { span: 24 },</span></span>
<span class="line"><span>    sm: { span: 16 },</span></span>
<span class="line"><span>  },</span></span>
<span class="line"><span>};</span></span>
<span class="line"><span>const tailFormItemLayout = {</span></span>
<span class="line"><span>  wrapperCol: {</span></span>
<span class="line"><span>    xs: {</span></span>
<span class="line"><span>      span: 24,</span></span>
<span class="line"><span>      offset: 0,</span></span>
<span class="line"><span>    },</span></span>
<span class="line"><span>    sm: {</span></span>
<span class="line"><span>      span: 16,</span></span>
<span class="line"><span>      offset: 8,</span></span>
<span class="line"><span>    },</span></span>
<span class="line"><span>  },</span></span>
<span class="line"><span>};</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br></div></div><h2 id="form-useforminstance" tabindex="-1">Form.useFormInstance <a class="header-anchor" href="#form-useforminstance" aria-label="Permalink to &quot;Form.useFormInstance&quot;">​</a></h2><p><code>4.20.0</code>新增，获取当前上下文正在使用的 Form 实例，常见于封装子组件消费无需透传 Form 实例</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>const Sub = () =&gt; {</span></span>
<span class="line"><span>  const form = Form.useFormInstance();</span></span>
<span class="line"><span></span></span>
<span class="line"><span>  return &lt;Button onClick={() =&gt; form.setFieldsValue({})} /&gt;;</span></span>
<span class="line"><span>};</span></span>
<span class="line"><span></span></span>
<span class="line"><span>export default () =&gt; {</span></span>
<span class="line"><span>  const [form] = Form.useForm();</span></span>
<span class="line"><span></span></span>
<span class="line"><span>  return (</span></span>
<span class="line"><span>    &lt;Form form={form}&gt;</span></span>
<span class="line"><span>      &lt;Sub /&gt;</span></span>
<span class="line"><span>    &lt;/Form&gt;</span></span>
<span class="line"><span>  );</span></span>
<span class="line"><span>};</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><h2 id="form-usewatch" tabindex="-1">Form.useWatch <a class="header-anchor" href="#form-usewatch" aria-label="Permalink to &quot;Form.useWatch&quot;">​</a></h2><p><code>4.20.0</code>新增，用于直接获取 form 中字段对应的值。通过该 Hooks 可以与诸如<code>useSWR</code>进行联动从而降低维护成本：</p><div class="language-tsx vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">const</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;"> Demo</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> =</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> () </span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">=&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">	const</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> [</span><span style="--shiki-light:#0070C1;--shiki-dark:#E5C07B;">form</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">] </span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;"> Form</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">useForm</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">();</span></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">	const</span><span style="--shiki-light:#0070C1;--shiki-dark:#E5C07B;"> userName</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> =</span><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;"> Form</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">useWatch</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&#39;username&#39;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">form</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">);</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">	const</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> { </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">data</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0070C1;--shiki-dark:#E5C07B;">options</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> } </span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;"> useSWR</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">`/api/user/</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">${</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">userName</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">`</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">fetcher</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">);</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#AF00DB;--shiki-dark:#C678DD;">	return</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> (</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">		&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Form</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> form</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">form</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">			&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Form.Item</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> name</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;username&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">				&lt;</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">AutoComplete</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> options</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">{</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">options</span><span style="--shiki-light:#0000FF;--shiki-dark:#C678DD;">}</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;"> /&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">			&lt;/</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Form.Item</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">		&lt;/</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">Form</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">	);</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">};</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><p>Form 仅会对变更的 Field 进行刷新，从而避免完整的组件刷新可能引发的性能问题。 因而你无法在 render 阶段通过<code>form.getFieldsValue</code>来实时获取字段值，而<code>useWatch</code>提供了一种特定字段访问的方式，从而使得在当前组件中可以直接消费字段的值。 同时，如果为了更好的渲染性能，你可以通过 Field 的 renderProps 仅更新需要更新的部分。 而当当前组件更新或者 effect 都不需要消费字段值时，则可以通过<code>onValuesChange</code>将数据抛出，从而避免组件更新。</p><h1 id="faq" tabindex="-1">FAQ <a class="header-anchor" href="#faq" aria-label="Permalink to &quot;FAQ&quot;">​</a></h1><h3 id="为什么-form-item-下的子组件defaultvalue不生效" tabindex="-1">为什么 Form.Item 下的子组件<code>defaultValue</code>不生效？<a href="https://4x.ant.design/components/form-cn/#%E4%B8%BA%E4%BB%80%E4%B9%88-Form.Item-%E4%B8%8B%E7%9A%84%E5%AD%90%E7%BB%84%E4%BB%B6-defaultValue-%E4%B8%8D%E7%94%9F%E6%95%88%EF%BC%9F" target="_blank" rel="noreferrer">#</a> <a class="header-anchor" href="#为什么-form-item-下的子组件defaultvalue不生效" aria-label="Permalink to &quot;为什么 Form.Item 下的子组件`defaultValue`不生效？[#](https://4x.ant.design/components/form-cn/#%E4%B8%BA%E4%BB%80%E4%B9%88-Form.Item-%E4%B8%8B%E7%9A%84%E5%AD%90%E7%BB%84%E4%BB%B6-defaultValue-%E4%B8%8D%E7%94%9F%E6%95%88%EF%BC%9F)&quot;">​</a></h3><p>当你为 Form.Item 设置<code>name</code>属性后，子组件会转为受控模式。 因而<code>defaultValue</code>不会生效。你需要在 Form 上通过<code>initialValues</code>设置默认值。</p><h3 id="form-的-initialvalues-与-item-的-initialvalue-区别" tabindex="-1">Form 的 initialValues 与 Item 的 initialValue 区别？<a href="https://4x.ant.design/components/form-cn/#Form-%E7%9A%84-initialValues-%E4%B8%8E-Item-%E7%9A%84-initialValue-%E5%8C%BA%E5%88%AB%EF%BC%9F" target="_blank" rel="noreferrer">#</a> <a class="header-anchor" href="#form-的-initialvalues-与-item-的-initialvalue-区别" aria-label="Permalink to &quot;Form 的 initialValues 与 Item 的 initialValue 区别？[#](https://4x.ant.design/components/form-cn/#Form-%E7%9A%84-initialValues-%E4%B8%8E-Item-%E7%9A%84-initialValue-%E5%8C%BA%E5%88%AB%EF%BC%9F)&quot;">​</a></h3><p>在大部分场景下，我们总是推荐优先使用 Form 的<code>initialValues</code>。 只有存在动态字段时你才应该使用 Item 的<code>initialValue</code>。 默认值遵循以下规则：</p><ol><li>Form 的<code>initialValues</code>拥有最高优先级</li><li>Field 的<code>initialValue</code>次之*. 多个同<code>name</code>Item 都设置<code>initialValue</code>时，则 Item 的<code>initialValue</code>不生效</li></ol><h3 id="为什么字段设置rules后更改值onfieldschange会触发三次" tabindex="-1">为什么字段设置<code>rules</code>后更改值<code>onFieldsChange</code>会触发三次？<a href="https://4x.ant.design/components/form-cn/#%E4%B8%BA%E4%BB%80%E4%B9%88%E5%AD%97%E6%AE%B5%E8%AE%BE%E7%BD%AE-rules-%E5%90%8E%E6%9B%B4%E6%94%B9%E5%80%BC-onFieldsChange-%E4%BC%9A%E8%A7%A6%E5%8F%91%E4%B8%89%E6%AC%A1%EF%BC%9F" target="_blank" rel="noreferrer">#</a> <a class="header-anchor" href="#为什么字段设置rules后更改值onfieldschange会触发三次" aria-label="Permalink to &quot;为什么字段设置`rules`后更改值`onFieldsChange`会触发三次？[#](https://4x.ant.design/components/form-cn/#%E4%B8%BA%E4%BB%80%E4%B9%88%E5%AD%97%E6%AE%B5%E8%AE%BE%E7%BD%AE-rules-%E5%90%8E%E6%9B%B4%E6%94%B9%E5%80%BC-onFieldsChange-%E4%BC%9A%E8%A7%A6%E5%8F%91%E4%B8%89%E6%AC%A1%EF%BC%9F)&quot;">​</a></h3><p>字段除了本身的值变化外，校验也是其状态之一。 因而在触发字段变化会经历以下几个阶段：</p><ol><li>Trigger value change</li><li>Rule validating</li><li>Rule validated</li></ol><p>在触发过程中，调用<code>isFieldValidating</code>会经历<code>false</code>&gt;<code>true</code>&gt;<code>false</code>的变化过程。</p><h2 id="contributors" tabindex="-1">Contributors <a class="header-anchor" href="#contributors" aria-label="Permalink to &quot;Contributors&quot;">​</a></h2><div><section class="border-b-1 border-[var(--vp-c-divider)] w-full border-b-solid mt-[24px] pb-[12px] flex gap-[12px] mb-[12px] flex-wrap max-w-[85%]"><div class="flex gap-[4px] items-center"><svg style="display:inline-block;" viewBox="0 0 16 16" width="1.2em" height="1.2em"><path fill="currentColor" d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16m.847-8.145a2.502 2.502 0 1 0-1.694 0C5.471 8.261 4 9.775 4 11c0 .395.145.995 1 .995h6c.855 0 1-.6 1-.995c0-1.224-1.47-2.74-3.153-3.145"></path></svg> 作者:<span>Long Mo</span></div><!----><!----><div class="flex gap-[4px] items-center"><svg style="display:inline-block;" viewBox="0 0 16 16" width="1.2em" height="1.2em"><path fill="currentColor" d="M9.293 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.707A1 1 0 0 0 13.707 4L10 .293A1 1 0 0 0 9.293 0zM9.5 3.5v-2l3 3h-2a1 1 0 0 1-1-1zM5.485 6.879l1.036 4.144l.997-3.655a.5.5 0 0 1 .964 0l.997 3.655l1.036-4.144a.5.5 0 0 1 .97.242l-1.5 6a.5.5 0 0 1-.967.01L8 9.402l-1.018 3.73a.5.5 0 0 1-.967-.01l-1.5-6a.5.5 0 1 1 .97-.242z"></path></svg> 字数统计:<span>8.6k 字</span></div><div class="flex gap-[4px] items-center"><svg style="display:inline-block;" viewBox="0 0 20 20" width="1.2em" height="1.2em"><path fill="currentColor" d="M10 0a10 10 0 1 0 10 10A10 10 0 0 0 10 0zm2.5 14.5L9 11V4h2v6l3 3z"></path></svg> 阅读时长:<span>35 分钟</span></div></section></div><div class="flex gap-2 items-center"><a href="https://github.com/Longmo666" rel="noreferrer" target="_blank"><img src="https://github.com/Longmo666.png" class="w-8 h-8 rounded-full"></a> Long Mo</div><div class="px-[1.2rem] relative py-[1rem] border-1 border-[var(--vp-c-border)]/[.55] w-full min-h-[32px] border-solid mt-[32px] leading-[24px] rounded-[4px]"><svg style="display:inline-block;" viewBox="0 0 512 512" width="1.2em" height="1.2em" class="absolute top-[1rem] right-[1.2rem]"><path fill="currentColor" d="M256 512a256 256 0 1 0 0-512a256 256 0 1 0 0 512m-56.6-199.4c31.2 31.2 81.9 31.2 113.1 0c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9c-50 50-131 50-181 0s-50-131 0-181s131-50 181 0c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0c-31.2-31.2-81.9-31.2-113.1 0s-31.2 81.9 0 113.1z"></path></svg><section class="flex flex-col gap-y-[8px] overflow-hidden"><div><span class="font-bold">文章作者：</span><span><a href="https://github.com/Longmo666" rel="noreferrer" target="_blank">Long Mo</a></span></div><div><span class="font-bold">版权声明：</span><span> 本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" rel="noreferrer" target="_blank"> CC BY-NC-SA 4.0 </a> 许可协议。转载请注明来自 <a href="#" rel="noreferrer" target="_blank">Longmo Docs</a></span> ！ </div></section></div></div></div></main><footer class="VPDocFooter" data-v-e512d8d8 data-v-73a75ed6><!--[--><!--]--><div class="edit-info" data-v-73a75ed6><div class="edit-link" data-v-73a75ed6><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/xxx" target="_blank" rel="noreferrer" data-v-73a75ed6><!--[--><span class="vpi-square-pen edit-link-icon" data-v-73a75ed6></span> 在 github 上编辑此页<!--]--></a></div><div class="last-updated" data-v-73a75ed6><p class="VPLastUpdated" data-v-73a75ed6 data-v-28126c9f>上次更新: <time datetime="2024-04-21T16:47:24.000Z" data-v-28126c9f></time></p></div></div><nav class="prev-next" data-v-73a75ed6><div class="pager" data-v-73a75ed6><a class="VPLink link pager-link prev" href="/long-press/react/ReactRouter" data-v-73a75ed6><!--[--><span class="desc" data-v-73a75ed6>上一篇</span><span class="title" data-v-73a75ed6>ReactRouter</span><!--]--></a></div><div class="pager" data-v-73a75ed6><a class="VPLink link pager-link next" href="/long-press/react/Antd%E4%BD%BF%E7%94%A8%E8%B8%A9%E5%9D%91%E7%BB%8F%E9%AA%8C%E6%B1%87%E6%80%BB/AntdTable%E8%A1%A8%E6%A0%BC" data-v-73a75ed6><!--[--><span class="desc" data-v-73a75ed6>下一篇</span><span class="title" data-v-73a75ed6>AntdTable表格</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-4c760b95 data-v-4f1388a4><div class="container" data-v-4f1388a4><!----><p class="copyright" data-v-4f1388a4>Copyright © 2024-present Longmo</p></div></footer><!--[--><!--]--></div></div>
    <script>window.__VP_HASH_MAP__=JSON.parse("{\"css3_lightningcss_index.md\":\"DvrpJ9-C\",\"css3_现代web布局_02.md\":\"NnFPbKjC\",\"css3_postcss_postcss-prefix-selector增加统一作用域.md\":\"BTi7xZ9T\",\"css3_现代web布局_01.md\":\"CSOVLYFa\",\"css3_index.md\":\"gWeubSHW\",\"css3_现代web布局_05.md\":\"XnHgE5qs\",\"css3_现代web布局_07.md\":\"B0JalRYm\",\"electron_electron开发实战_index.md\":\"DlTk4nHM\",\"css3_现代web布局_10.md\":\"QvmMy1qK\",\"css3_现代web布局_03.md\":\"DndCH4AP\",\"css3_现代web布局_22.md\":\"BTcBI1Ar\",\"css3_现代web布局_index.md\":\"BRrTkyN-\",\"react_antd使用踩坑经验汇总_procomponents_index.md\":\"CnA6aYv_\",\"nodejs_change-case更改大小写.md\":\"CtntdOEt\",\"react_react好用的插件_rxjs-hooks.md\":\"CahRrTvr\",\"nodejs_复制移动文件.md\":\"DJvz4Dcu\",\"css3_现代web布局_15.md\":\"CxTdKubj\",\"css3_现代web布局_06.md\":\"DKzKVbHi\",\"guide_axios封装.md\":\"yeyMeLKL\",\"react_react实战_设计模式与最佳实践_服务器端渲染（1）：基本套路.md\":\"Ci9ZteTc\",\"react_react实战_设计模式与最佳实践_react 单元测试.md\":\"ghuW9_Ym\",\"react_react好用的插件_react-to-print.md\":\"DUEXVCMF\",\"css3_现代web布局_12.md\":\"DzvNLnB9\",\"react_react好用的插件_react-load-script.md\":\"DBiqdA1k\",\"electron_electron开发实战_释放前端想象力.md\":\"DjfKiu2P\",\"react_react实战_设计模式与最佳实践_react的设计思想.md\":\"CDFxAnJB\",\"react_react组件库搭建指南_02开发调试.md\":\"C_T24zrV\",\"react_react实战_设计模式与最佳实践_react 的未来（1）： 拥抱异步渲染.md\":\"DDCdfFZA\",\"react_react实战_设计模式与最佳实践_react 状态管理（1）：组件状态.md\":\"CleS-bmU\",\"react_react好用的插件_react-viewer.md\":\"CK92G5ky\",\"electron_electron开发实战_electron应用打包.md\":\"DVihGNUt\",\"react_react好用的插件_index.md\":\"CYvYsgxN\",\"react_react好用的插件_formik-antd.md\":\"BVXoD1vi\",\"react_react实战_设计模式与最佳实践_组件设计模式（2）：高阶组件.md\":\"tcEHCkX9\",\"react_css解决方案_styled-components.md\":\"BdEVJSYP\",\"react_react后台管理系统项目实战_index.md\":\"Cf5Aki5e\",\"react_react好用的插件_floating-ui.md\":\"CJ47U607\",\"react_react好用的插件_js-pinyin.md\":\"CCi7zpiQ\",\"electron_electron开发实战_原生gui.md\":\"CKymHWIE\",\"react_antd使用踩坑经验汇总_tabs选项卡.md\":\"DbBQtB84\",\"react_react好用的插件_immer.md\":\"J3J2rLev\",\"css3_现代web布局_08.md\":\"CKAlv-cw\",\"react_react好用的插件_@ebay_nice-modal-react.md\":\"2t81QhzX\",\"react_react hooks.md\":\"DllmXlwe\",\"react_发布订阅_事件总线.md\":\"DGl0tyUU\",\"react_react组件库搭建指南_03编译打包.md\":\"BSWt83_X\",\"guide_quickstart.md\":\"DNtvLzj7\",\"react_开发一个组件库_如何完善组件单测.md\":\"9v27j5fA\",\"react_慕课网最新react技术栈，实战复杂低代码项目-仿问卷星_index.md\":\"DV2mTP-I\",\"react_ahooks_usewhydidyouupdate.md\":\"DeDGpqMK\",\"react_开发一个组件库_index.md\":\"DFCM9Fyc\",\"react_ahooks_usemutationobserver.md\":\"DopGRhup\",\"react_ahooks_uselocalstoragestate.md\":\"CNKG9DfH\",\"react_如何写出更优雅的 react 组件.md\":\"BNRAsuz5\",\"react_ahooks_useeventlistener.md\":\"C022IGRg\",\"react_ahooks_useloading.md\":\"hmNqPF-b\",\"react_ahooks_usethrottle.md\":\"Cxs7sHDg\",\"react_ahooks_usevirtuallist.md\":\"CbSqBIa_\",\"react_ahooks_index.md\":\"BZgeYQAN\",\"react_ahooks_usethrottleeffect.md\":\"Cu9lbAeN\",\"react_ahooks_useinterval.md\":\"z_JjaRUC\",\"react_ahooks_useinfinitescroll.md\":\"05X3BT3k\",\"react_ahooks_useboolean.md\":\"B9uk9pv1\",\"react_ahooks_usehover.md\":\"CQ90ygMl\",\"react_ahooks_usetoggle.md\":\"Dhg-kOcZ\",\"css3_现代web布局_16.md\":\"DqleGwZV\",\"electron_前端必学的桌面开发：electron_react开发桌面应用_1w多字超详细.md\":\"B4S71t_j\",\"react_index.md\":\"VMykJvDU\",\"react_ahooks_usethrottlefn.md\":\"h86SJGdz\",\"react_ahooks_useurlstate.md\":\"N0NRnJcE\",\"react_ahooks_usetrackedeffect.md\":\"DikGGrmT\",\"react_状态管理_natur.md\":\"CjabmgMv\",\"react_ahooks_useantdtable.md\":\"BRTEfq-4\",\"react_ahooks_userafinterval.md\":\"DbqchCta\",\"react_ahooks_useunmount.md\":\"DKpqgfJ2\",\"getting_index.md\":\"CslhLb_Q\",\"react_ahooks_usepagination.md\":\"BZPuA30r\",\"react_react好用的插件_react-jsx-parse.md\":\"BFws_Jvt\",\"react_ahooks_useprevious.md\":\"DoaMcKL0\",\"react_数据请求的reacthooks库_index.md\":\"BVjU5EHg\",\"nodejs_解压缩.md\":\"B8sDL8Ck\",\"react_开发一个组件库_handlebars模板.md\":\"eFtlYiJE\",\"react_自定义hooks_useasynceffect.md\":\"0TOcgDP8\",\"react_ahooks_usewebsocket.md\":\"BSCnKAhD\",\"css3_现代web布局_09.md\":\"CJg03gvR\",\"react_ahooks_useasynceffect.md\":\"LHnOKcnJ\",\"移动端项目_index.md\":\"BYabTvu-\",\"react_ahooks_usememoizedfn.md\":\"BHTS7A7g\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_index.md\":\"BOXXNcld\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_第04章 ts 类易被忽视的重要技能，单件设计模式和相关技能深入.md\":\"CCgSUH_B\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_第11章 运用 ts 手写 promise 源码.md\":\"BalHRnKD\",\"react_性能监控_index.md\":\"BLRO71Ft\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_第03章 ts类方法代码优化的三大法宝： 函数重载、类方法重载、类构造器重载.md\":\"BS1BYvbm\",\"standard_fatherrc.ts配置文件.md\":\"Dkdjh5--\",\"react_自定义hooks_useexceldownload.md\":\"DGb3CWTU\",\"tools_runjs.md\":\"IzZ9xe5N\",\"tools_自动版本管理和生成changelog.md\":\"Dak6Id3b\",\"react_react实战_设计模式与最佳实践_路由的魔法：react router.md\":\"CZ2pkqmc\",\"tools_依赖镜像地址.md\":\"D5Etjm_v\",\"react_react实战_设计模式与最佳实践_组件设计模式（5）：组合组件.md\":\"D54UFiB5\",\"tools_workspaces核心特性总结.md\":\"CxNbObiL\",\"react_自定义hooks_usegreatasync.md\":\"DRVA9yrK\",\"react_react组件库搭建指南_05标准化发布流程.md\":\"BCCPnMto\",\"react_react实战_设计模式与最佳实践_组件设计模式（1）：聪明组件和傻瓜组件.md\":\"tHZI-Xkb\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_第05章 ts继承深入_手写优化底层源码.md\":\"B3EQqYKB\",\"tools_rollup打包.md\":\"tSbCVBX5\",\"tools_webstorm快捷键.md\":\"wTpb7qJx\",\"react_react实战_设计模式与最佳实践_服务器端渲染（2）理解nextjs.md\":\"BqBtpEHC\",\"tools_vscode使用教程.md\":\"CqieXqJ8\",\"react_react最佳实践.md\":\"CG2Xrs5X\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_第07章 泛型类_泛型接口_泛型类约束的复杂应用【无比重要的深度技能】.md\":\"CuEcP3SC\",\"react_自定义hooks_useeffectenhanced.md\":\"BSK0VwJa\",\"vue_index.md\":\"OW-QE8NS\",\"react_状态管理_react中的组件通信方案.md\":\"D8VvM0h8\",\"typescript_ts 从入门到深度掌握，晋级typescript高手实战课程_index.md\":\"CHFAmRtj\",\"standard_pretty-quick.md\":\"CL9LWL6Z\",\"typescript_ts 从入门到深度掌握，晋级typescript高手实战课程_第10章ts声明文件，ts模块.md\":\"BgUWX90K\",\"react_ahooks_usesetstate.md\":\"jYidiqGI\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_第06章 ts高频使用技能： 类型断言、类型守卫、自定义守卫_ 多态_类型守卫组合应用.md\":\"DTiCfWrY\",\"standard_typings.d.ts.md\":\"COgkopwu\",\"react_react实战_设计模式与最佳实践_组件设计模式（4）：提供者模式.md\":\"CpJkLsBD\",\"typescript_axios_index.md\":\"CjiV2R0j\",\"css3_现代web布局_23.md\":\"DtcX9bTS\",\"electron_electron开发实战_app特性.md\":\"CCGKgh2J\",\"tools_常用命令.md\":\"BCECAPPN\",\"react_ahooks_useupdateeffect.md\":\"B8UnIDT1\",\"tools_npm镜像源管理工具.md\":\"BQvl6-cK\",\"react_自定义hooks_index.md\":\"TbSBlD7i\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_第15章 js 原型_复杂原型继承 【查漏补缺】.md\":\"Bym60KVf\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_第12章整合vue3手写高水准大厂的ts版vuex4源码.md\":\"Cb3ALa6o\",\"react_css解决方案_css_module.md\":\"kmxgfb6l\",\"css3_现代web布局_04.md\":\"qxIAivzd\",\"react_ahooks_useraftimeout.md\":\"zZ6X2MGp\",\"react_自定义hooks_usecopy.md\":\"B_vVrQah\",\"react_useform.md\":\"D7K5ezD8\",\"css3_现代web布局_27.md\":\"DVEkZdZW\",\"react_状态管理_valtio.md\":\"CXPGtt95\",\"typescript_tsup如何使用.md\":\"CHCfoXjX\",\"react_ahooks_usecookiestate.md\":\"CdRty31d\",\"tools_node各类命令.md\":\"Dp8hvkZX\",\"electron_electron开发实战_electron优化白屏.md\":\"TluuIOV8\",\"css3_现代web布局_24.md\":\"BTAj5AxQ\",\"css3_现代web布局_13.md\":\"BvIlMTco\",\"css3_现代web布局_14.md\":\"CXYZfM8r\",\"react_antd使用踩坑经验汇总_antdtable表格.md\":\"DJY5Mvdl\",\"guide_babel.md\":\"DTbGDSVq\",\"react_状态管理_zustand翻译文档.md\":\"D72s6MxU\",\"guide_index.md\":\"zNzT7elx\",\"tools_资源导航.md\":\"ByR0zpON\",\"react_antd使用踩坑经验汇总_menu菜单.md\":\"CUT3snoK\",\"tools_pnpm多包项目.md\":\"B5SWK1rS\",\"guide_webpack插件.md\":\"RycubFW9\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_第02章 全栈思维全面深度掌握 ts 类.md\":\"DT7QMqkY\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_第10章 从装饰器应用，底层 js 到 仿 nestjs实战，路由器底层复杂泛型.md\":\"D8kaCtfy\",\"electron_electron开发实战_开发一个简单版的番茄钟.md\":\"CrvCihNB\",\"react_ahooks_useclickaway.md\":\"CZiIOkBS\",\"index.md\":\"C-4ajOyn\",\"react_自定义hooks_useinterval.md\":\"CL7txl3c\",\"nodejs_请求工具类.md\":\"pJv1vv26\",\"react_ahooks_usedebouncefn.md\":\"DoBqhrGU\",\"getting_why.md\":\"B0La2IDF\",\"vue_vue2打包优化.md\":\"o7QF6PW3\",\"nodejs_globby.md\":\"CTH274g9\",\"standard_tsconfig.json.md\":\"CFCzGYxu\",\"react_reactrouter.md\":\"B9PtxEJ9\",\"typescript_ts-challenge.md\":\"CQjhG-Mq\",\"css3_现代web布局_18.md\":\"DbKppEVn\",\"react_ahooks_usedebounce.md\":\"DRqZkoSI\",\"react_自定义hooks_useintersection.md\":\"Bvd3uAWW\",\"nodejs_cli工具_index.md\":\"CGwLSUZ5\",\"react_react实战_设计模式与最佳实践_index.md\":\"C8mvV9MI\",\"tools_规范git代码提交信息.md\":\"BASOsPqX\",\"tools_windows测试ip端口.md\":\"DG6x0Mw8\",\"electron_electron开发实战_使用nodejs调用原生模块.md\":\"CRvmiRGG\",\"nodejs_kill-port跨平台解决端口占用问题.md\":\"BEoOmVOA\",\"css3_现代web布局_28.md\":\"jsAdcmE1\",\"react_react实战_设计模式与最佳实践_组件实践（1）：如何定义清晰可维护的接口.md\":\"C9ky0LxI\",\"react_react实战_设计模式与最佳实践_react 的未来（3）：函数化的 hooks.md\":\"CFPGDH01\",\"react_react组件库搭建指南_index.md\":\"DavlhH-3\",\"react_react避坑指南_usecallback_usememo.md\":\"DBJVYTaL\",\"standard_prettier.md\":\"B8zmNcDZ\",\"react_react实战_设计模式与最佳实践_组件设计模式（3）：render props 模式.md\":\"J6wo2neN\",\"standard_git提交规范.md\":\"BY6vFgPF\",\"css3_现代web布局_26.md\":\"BlwKd9DD\",\"react_redux.md\":\"BR83V68G\",\"nodejs_fs-extra文件系统扩展.md\":\"BeGbM1-y\",\"react_react组件库搭建指南_06dumi2.x的使用.md\":\"BovenX8E\",\"tools_github常用技巧.md\":\"DCwuF17j\",\"electron_数据持久缓存方案_electron-store.md\":\"6LHFkhuG\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_第08章 深度掌握泛型函数、泛型函数重载【无比重要的深度技能】.md\":\"BvOBMPMd\",\"nodejs_semantic-release.md\":\"B_4_SZrq\",\"react_react实战_设计模式与最佳实践_组件实践（2）：组件的内部实现.md\":\"pvpT0TG5\",\"typescript_tslib如何使用.md\":\"BsoCW_pQ\",\"react_react实战_设计模式与最佳实践_组件实践（3）：组件化样式.md\":\"DGiADrWs\",\"react_css解决方案_index.md\":\"Q7QSPlYi\",\"typescript_tsdx使用.md\":\"Bcl_A70V\",\"css3_现代web布局_17.md\":\"BCxBKcNP\",\"react_react避坑指南_usestate.md\":\"DK9-NLHJ\",\"electron_react中开发踩坑.md\":\"DpZMxt4e\",\"react_react实战_设计模式与最佳实践_react 的未来（2）：suspense 带来的异步操作革命.md\":\"BLMrhryT\",\"guide_两个跨域页面进行跳转传参的终极方案.md\":\"DrhWeMH4\",\"react_react避坑指南_index.md\":\"DSoRNwmH\",\"react_自定义hooks_useinputhistory.md\":\"BzWdP5Ij\",\"react_ahooks_useeventemitter.md\":\"OluScTeX\",\"react_自定义hooks_usedebounce.md\":\"7ESFZNIZ\",\"electron_dll使用.md\":\"CGmPSJLR\",\"css3_现代web布局_19.md\":\"DIVJU0PC\",\"react_react好用的插件_react-fast-marquee.md\":\"ZhOvpApp\",\"guide_markdown语法.md\":\"BiAJoIJO\",\"nodejs_execa执行外部命令.md\":\"x2fLlbix\",\"nodejs_npkill快速查找删除node_modules.md\":\"CCmNiMZ0\",\"react_ahooks_usefullscreen.md\":\"BkgW8e5k\",\"react_自定义hooks_usesetparticalstate.md\":\"BUv_cnmS\",\"standard_css规范.md\":\"DeHg6jnS\",\"electron_数据持久缓存方案_数据持久缓存库lndb.md\":\"DJUK7UVx\",\"react_自定义组件_如何在react应用中建立错误处理层.md\":\"CNGgmToJ\",\"react_react搞定复杂项目状态管理_index.md\":\"BAj7---e\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_第09章 深入infer、ts高级类型、泛型再进阶【全方位深度掌握 ts 泛型】.md\":\"C4bu5mph\",\"tools_idea 注释模板配置.md\":\"0gbuJbd6\",\"electron_基于electron-vite构建react桌面客户端.md\":\"DLOPvG7Q\",\"nodejs_release-it.md\":\"DMPaqLXc\",\"react_react实战_设计模式与最佳实践_react 状态管理（3）：mobx 使用模式.md\":\"Bm7xwY_i\",\"react_ahooks_usehistorytravel.md\":\"DiEJa1G5\",\"css3_现代web布局_21.md\":\"D2PeNBzk\",\"css3_现代web布局_11.md\":\"B10tI7m_\",\"react_antd使用踩坑经验汇总_tree组件.md\":\"CHpE5yvc\",\"electron_electron-builder.md\":\"DNL_pnq4\",\"standard_vue规范.md\":\"DyiLpRai\",\"electron_index.md\":\"BRqk3UrY\",\"react_自定义hooks_userouter.md\":\"LSydLgnY\",\"utils_rxjs.md\":\"C9QQC7cC\",\"standard_codereview代码审查.md\":\"vOhADmqT\",\"react_ahooks_userequest函数.md\":\"erWiB1Ub\",\"react_自定义hooks_usedebouncefn.md\":\"CD-kzD_X\",\"linux_linux常用命令.md\":\"D7RSIp22\",\"standard_commitlint.md\":\"Bc6BHMQJ\",\"react_自定义hooks_uselocationlisten.md\":\"lpoaVI0f\",\"standard_组件封装规范.md\":\"0Ow45yWm\",\"react_自定义hooks_useecharts.md\":\"GJwF9MkV\",\"nodejs_bluebird超高性能的promise库.md\":\"DY98ImvT\",\"react_react避坑指南_useref.md\":\"fBjuCQ9O\",\"electron_electron开发实战_electron环境搭建.md\":\"BaHlrXyB\",\"utils_index.md\":\"mk7T0j55\",\"react_自定义hooks_useevent.md\":\"Comn2-Er\",\"typescript_index.md\":\"Dcw9VPNE\",\"standard_git分支开发规范.md\":\"BIXsyTAc\",\"electron_三方库.md\":\"CAt92F-s\",\"react_react组件库搭建指南_01项目初始化.md\":\"hYE7GWll\",\"react_react好用的插件_jsbarcode.md\":\"CBTRcUAR\",\"electron_electron-react-boilerplate.md\":\"BzWSbABc\",\"react_自定义hooks_usemodal.md\":\"B_XFkn0G\",\"standard_editorconfig.md\":\"D8UrOG7b\",\"tools_git基本使用.md\":\"BvP_0S5g\",\"react_react避坑指南_闭包陷阱.md\":\"zChJGfX2\",\"standard_prettierrc.md\":\"BdHhuL9t\",\"standard_babelrc.md\":\"DxUrlX2l\",\"standard_eslint规范.md\":\"Mu3t4FWn\",\"react_react实战_设计模式与最佳实践_react 状态管理（4）：不同方式对比.md\":\"C3iD1iFV\",\"react_antd使用踩坑经验汇总_index.md\":\"DDsanD1T\",\"tools_yalc本地调试组件库方案.md\":\"BQ3H5AQN\",\"standard_json格式规范.md\":\"B3NuLvz_\",\"electron_配置讲解.md\":\"Bz4ASaED\",\"nodejs_index.md\":\"D6qsbk0v\",\"standard_node_cjs和esm混合开发.md\":\"DedlYZ1u\",\"css3_现代web布局_25.md\":\"DZBc6jqi\",\"standard_stylelint.md\":\"zaLGDP6-\",\"react_自定义hooks_useformmodal.md\":\"DRclMTXI\",\"standard_开源证书.md\":\"CNa1gXoD\",\"react_antd使用踩坑经验汇总_其他弹出层.md\":\"CYvGLZdo\",\"utils_baseinputnumber.md\":\"CCJr66pT\",\"guide_installation.md\":\"Cyna48DO\",\"utils_lodash.md\":\"B_LD-ulc\",\"standard_react规范.md\":\"BDzywc_U\",\"standard_sytlelint.md\":\"BHAGjA08\",\"tools_readme.md自动生成目录.md\":\"Doh9u-Eg\",\"react_自定义hooks_usememo.md\":\"CZgD0tn_\",\"standard_gitignore.md\":\"DGdE7Xq3\",\"react_react避坑指南_useeffect.md\":\"BNAb8N04\",\"nodejs_pkg打包node程序.md\":\"C_mVgg8Y\",\"standard_husky.md\":\"DWpB1fyF\",\"utils_calcutils.md\":\"QyONwp33\",\"tools_index.md\":\"CrRsxT5W\",\"standard_index.md\":\"zy5tYKLI\",\"react_自定义hooks_usemethods.md\":\"CLURCU9f\",\"react_自定义hooks_useloadscript.md\":\"CYcWRvSo\",\"tools_google快捷键.md\":\"mD76rDlK\",\"standard_package.json.md\":\"jsOo3MDQ\",\"standard_前端开发最佳实践总结.md\":\"BGrFiLKW\",\"react_自定义hooks_usesafestate.md\":\"m62ZMP2_\",\"standard_prettierignore.md\":\"VM68Ff5l\",\"react_react实战_设计模式与最佳实践_react 状态管理（2）：redux 使用模式.md\":\"CA0pcV96\",\"utils_mitt.md\":\"DG7F8qQl\",\"standard_gitlab.yml.md\":\"lN9PqoBe\",\"nodejs_minimist命令行参数解析.md\":\"Dx4gEgi2\",\"standard_命名规范.md\":\"DWUPIS4I\",\"react_自定义hooks_usepersistcallback.md\":\"FHXVMyDJ\",\"tools_windows终端优化.md\":\"DANvAyOj\",\"electron_ssl证书.md\":\"Q1dQBluF\",\"react_自定义组件_lazyload.md\":\"B9Bn4iLf\",\"react_自定义组件_keepalive.md\":\"YY9acXG_\",\"tools_常用node库.md\":\"DTeGhNPp\",\"standard_lint-staged.md\":\"DidcSpvQ\",\"css3_现代web布局_20.md\":\"DVP5FwHt\",\"guide_数字相关知识.md\":\"BRzTdbnI\",\"standard_圈复杂度.md\":\"B-UtHNKH\",\"tools_windows快捷键.md\":\"BFgiqO74\",\"standard_ts规范.md\":\"CiDbO0cg\",\"react_antd使用踩坑经验汇总_form表单.md\":\"DGT8jzsZ\",\"react_状态管理_zustand.md\":\"CQAFP37K\",\"react_react好用的插件_react-hook-form.md\":\"BsJSOnXN\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"zh-CN\",\"dir\":\"ltr\",\"title\":\"龙陌的博客\",\"description\":\"基于vite为基础搭建的风格脚手架,提供多种模板以便于更高效的解决业务需求！\",\"base\":\"/long-press/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"logo\":\"/logo.ico\",\"nav\":[{\"text\":\"💻 首页\",\"link\":\"/\"},{\"text\":\"💡 指南\",\"link\":\"/guide/\",\"activeMatch\":\"/guide/\"},{\"text\":\"🔧 编程工具\",\"link\":\"/tools/\"},{\"text\":\"🔧 常用工具类\",\"link\":\"/utils/\"},{\"text\":\"📋 前端规范\",\"link\":\"/standard/\"},{\"text\":\"⭐ React\",\"link\":\"/react/React实战,设计模式与最佳实践/\"},{\"text\":\"⭐ TypeScript\",\"link\":\"/typescript/\"},{\"text\":\"⭐ Css3\",\"link\":\"/css3/\"},{\"text\":\"⭐ Electron\",\"link\":\"/electron/\"},{\"text\":\"⭐ Linux\",\"link\":\"/linux/linux常用命令\",\"activeMatch\":\"/linux/\"}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://vitepress.vuejs.org/guide/getting-started\"},{\"icon\":{\"svg\":\"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\" aria-hidden=\\\"true\\\" role=\\\"img\\\" width=\\\"20\\\" height=\\\"20\\\"  viewBox=\\\"0 0 512 512\\\" >\\n    <path fill=\\\"currentColor\\\" d=\\\"M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z\\\"></path>\\n  </svg>\"},\"link\":\"https://space.bilibili.com/248956095\"}],\"footer\":{\"copyright\":\"Copyright © 2024-present Longmo\"},\"sidebar\":{\"/\":[{\"text\":\"开始阅读\",\"collapsed\":false,\"items\":[{\"text\":\"阅读须知\",\"link\":\"/guide\"}]}],\"/tools/\":[{\"collapsed\":false,\"items\":[{\"text\":\"GitHub常用技巧\",\"link\":\"\\\\tools\\\\GitHub常用技巧.md\"},{\"text\":\"Google快捷键\",\"link\":\"\\\\tools\\\\Google快捷键.md\"},{\"text\":\"README.md自动生成目录\",\"link\":\"\\\\tools\\\\README.md自动生成目录.md\"},{\"text\":\"Rollup打包\",\"link\":\"\\\\tools\\\\Rollup打包.md\"},{\"text\":\"Runjs\",\"link\":\"\\\\tools\\\\Runjs.md\"},{\"text\":\"Vscode使用教程\",\"link\":\"\\\\tools\\\\Vscode使用教程.md\"},{\"text\":\"WebStorm快捷键\",\"link\":\"\\\\tools\\\\WebStorm快捷键.md\"},{\"text\":\"Windows快捷键\",\"link\":\"\\\\tools\\\\Windows快捷键.md\"},{\"text\":\"Windows测试IP端口\",\"link\":\"\\\\tools\\\\Windows测试IP端口.md\"},{\"text\":\"Windows终端优化\",\"link\":\"\\\\tools\\\\Windows终端优化.md\"},{\"text\":\"Yalc本地调试组件库方案\",\"link\":\"\\\\tools\\\\Yalc本地调试组件库方案.md\"},{\"text\":\"git基本使用\",\"link\":\"\\\\tools\\\\git基本使用.md\"},{\"text\":\"idea 注释模板配置\",\"link\":\"\\\\tools\\\\idea 注释模板配置.md\"},{\"text\":\"node各类命令\",\"link\":\"\\\\tools\\\\node各类命令.md\"},{\"text\":\"npm镜像源管理工具\",\"link\":\"\\\\tools\\\\npm镜像源管理工具.md\"},{\"text\":\"pnpm多包项目\",\"link\":\"\\\\tools\\\\pnpm多包项目.md\"},{\"text\":\"workspaces核心特性总结\",\"link\":\"\\\\tools\\\\workspaces核心特性总结.md\"},{\"text\":\"依赖镜像地址\",\"link\":\"\\\\tools\\\\依赖镜像地址.md\"},{\"text\":\"常用node库\",\"link\":\"\\\\tools\\\\常用node库.md\"},{\"text\":\"常用命令\",\"link\":\"\\\\tools\\\\常用命令.md\"},{\"text\":\"自动版本管理和生成CHANGELOG\",\"link\":\"\\\\tools\\\\自动版本管理和生成CHANGELOG.md\"},{\"text\":\"规范GIT代码提交信息\",\"link\":\"\\\\tools\\\\规范GIT代码提交信息.md\"},{\"text\":\"资源导航\",\"link\":\"\\\\tools\\\\资源导航.md\"}]}],\"/standard/\":[{\"collapsed\":false,\"items\":[{\"text\":\"CodeReview代码审查\",\"link\":\"\\\\standard\\\\CodeReview代码审查.md\"},{\"text\":\"Css规范\",\"link\":\"\\\\standard\\\\Css规范.md\"},{\"text\":\"Git分支开发规范\",\"link\":\"\\\\standard\\\\Git分支开发规范.md\"},{\"text\":\"Node_CJS和ESM混合开发\",\"link\":\"\\\\standard\\\\Node_CJS和ESM混合开发.md\"},{\"text\":\"React规范\",\"link\":\"\\\\standard\\\\React规范.md\"},{\"text\":\"babelrc\",\"link\":\"\\\\standard\\\\babelrc.md\"},{\"text\":\"commitlint\",\"link\":\"\\\\standard\\\\commitlint.md\"},{\"text\":\"editorconfig\",\"link\":\"\\\\standard\\\\editorconfig.md\"},{\"text\":\"eslint规范\",\"link\":\"\\\\standard\\\\eslint规范.md\"},{\"text\":\"fatherrc.ts配置文件\",\"link\":\"\\\\standard\\\\fatherrc.ts配置文件.md\"},{\"text\":\"gitignore\",\"link\":\"\\\\standard\\\\gitignore.md\"},{\"text\":\"gitlab.yml\",\"link\":\"\\\\standard\\\\gitlab.yml.md\"},{\"text\":\"git提交规范\",\"link\":\"\\\\standard\\\\git提交规范.md\"},{\"text\":\"husky\",\"link\":\"\\\\standard\\\\husky.md\"},{\"text\":\"json格式规范\",\"link\":\"\\\\standard\\\\json格式规范.md\"},{\"text\":\"lint-staged\",\"link\":\"\\\\standard\\\\lint-staged.md\"},{\"text\":\"package.json\",\"link\":\"\\\\standard\\\\package.json.md\"},{\"text\":\"prettier\",\"link\":\"\\\\standard\\\\prettier.md\"},{\"text\":\"prettierignore\",\"link\":\"\\\\standard\\\\prettierignore.md\"},{\"text\":\"prettierrc\",\"link\":\"\\\\standard\\\\prettierrc.md\"},{\"text\":\"pretty-quick\",\"link\":\"\\\\standard\\\\pretty-quick.md\"},{\"text\":\"stylelint\",\"link\":\"\\\\standard\\\\stylelint.md\"},{\"text\":\"sytlelint\",\"link\":\"\\\\standard\\\\sytlelint.md\"},{\"text\":\"tsconfig.json\",\"link\":\"\\\\standard\\\\tsconfig.json.md\"},{\"text\":\"ts规范\",\"link\":\"\\\\standard\\\\ts规范.md\"},{\"text\":\"typings.d.ts\",\"link\":\"\\\\standard\\\\typings.d.ts.md\"},{\"text\":\"vue规范\",\"link\":\"\\\\standard\\\\vue规范.md\"},{\"text\":\"前端开发最佳实践总结\",\"link\":\"\\\\standard\\\\前端开发最佳实践总结.md\"},{\"text\":\"命名规范\",\"link\":\"\\\\standard\\\\命名规范.md\"},{\"text\":\"圈复杂度\",\"link\":\"\\\\standard\\\\圈复杂度.md\"},{\"text\":\"开源证书\",\"link\":\"\\\\standard\\\\开源证书.md\"},{\"text\":\"组件封装规范\",\"link\":\"\\\\standard\\\\组件封装规范.md\"}]}],\"/aHooks/\":[],\"/utils/\":[{\"collapsed\":false,\"items\":[{\"text\":\"BaseInputNumber\",\"link\":\"\\\\utils\\\\BaseInputNumber.md\"},{\"text\":\"calcUtils\",\"link\":\"\\\\utils\\\\calcUtils.md\"},{\"text\":\"lodash\",\"link\":\"\\\\utils\\\\lodash.md\"},{\"text\":\"mitt\",\"link\":\"\\\\utils\\\\mitt.md\"},{\"text\":\"rxjs\",\"link\":\"\\\\utils\\\\rxjs.md\"}]}],\"/guide/\":[{\"text\":\"基础\",\"items\":[{\"text\":\"快速开始\",\"link\":\"/guide/quickstart\"},{\"text\":\"Markdown语法\",\"link\":\"/guide/Markdown语法\"}]},{\"text\":\"进阶\",\"items\":[{\"text\":\"打包指南\",\"link\":\"/guide/打包指南\"}]}],\"/react/\":{\"base\":\"/react/\",\"items\":[{\"text\":\"React基础\",\"base\":\"/react/\",\"collapsed\":false,\"items\":[{\"text\":\"Redux\",\"link\":\"Redux\"},{\"text\":\"React Hooks\",\"link\":\"React Hooks\"},{\"text\":\"ReactRouter\",\"link\":\"ReactRouter\"}]},{\"text\":\"Antd使用踩坑经验汇总\",\"base\":\"/react/Antd使用踩坑经验汇总/\",\"items\":[{\"text\":\"Form表单\",\"link\":\"Form表单\"},{\"text\":\"AntdTable表格\",\"link\":\"AntdTable表格\"},{\"text\":\"Tree树组件\",\"link\":\"Tree组件\"},{\"text\":\"其他弹出层\",\"link\":\"其他弹出层\"},{\"text\":\"Tabs选项卡\",\"link\":\"Tabs选项卡\"},{\"text\":\"Menu菜单\",\"link\":\"Menu菜单\"},{\"text\":\"Menu菜单\",\"link\":\"Menu菜单\"}]},{\"text\":\"CSS解决方案\",\"base\":\"/react/CSS解决方案/\",\"items\":[{\"text\":\"CSS Module\",\"link\":\"CSS_Module\"}]},{\"text\":\"ahooks\",\"link\":\"/aHooks/\"},{\"text\":\"自定义Hooks\",\"base\":\"/react/自定义Hooks/\",\"items\":[{\"text\":\"useRouter\",\"link\":\"useRouter\"},{\"text\":\"useLoadScript\",\"link\":\"useLoadScript\"},{\"text\":\"useInputHistory\",\"link\":\"useInputHistory\"},{\"text\":\"useSetParticalState\",\"link\":\"useSetParticalState\"},{\"text\":\"useFormModal\",\"link\":\"useFormModal\"},{\"text\":\"useCopy\",\"link\":\"useCopy\"},{\"text\":\"useIntersection\",\"link\":\"useIntersection\"},{\"text\":\"useModal\",\"link\":\"useModal\"},{\"text\":\"useInterval\",\"link\":\"useInterval\"},{\"text\":\"useModal\",\"link\":\"useModal\"},{\"text\":\"useModal\",\"link\":\"useModal\"}]},{\"text\":\"React实战：设计模式和最佳实践\",\"base\":\"/react/React实战,设计模式与最佳实践/\",\"collapsed\":true,\"items\":[{\"text\":\"React的设计思想\",\"link\":\"React的设计思想\"},{\"text\":\"组件实践（1）：如何定义清晰可维护的接口\",\"link\":\"组件实践（1）：如何定义清晰可维护的接口\"},{\"text\":\"组件实践（2）：组件的内部实现\",\"link\":\"组件实践（2）：组件的内部实现\"},{\"text\":\"组件实践（3）：组件化样式\",\"link\":\"组件实践（3）：组件化样式\"},{\"text\":\"组件设计模式（1）：聪明组件和傻瓜组件\",\"link\":\"组件设计模式（1）：聪明组件和傻瓜组件\"},{\"text\":\"组件设计模式（2）：高阶组件\",\"link\":\"组件设计模式（2）：高阶组件\"},{\"text\":\"组件设计模式（3）：render props 模式\",\"link\":\"组件设计模式（3）：render props 模式\"},{\"text\":\"组件设计模式（4）：提供者模式\",\"link\":\"组件设计模式（4）：提供者模式\"},{\"text\":\"组件设计模式（5）：组合组件\",\"link\":\"组件设计模式（5）：组合组件\"},{\"text\":\"React 单元测试\",\"link\":\"React 单元测试\"},{\"text\":\"React 状态管理（1）：组件状态\",\"link\":\"React 状态管理（1）：组件状态\"},{\"text\":\"React 状态管理（2）：Redux 使用模式\",\"link\":\"React 状态管理（2）：Redux 使用模式\"},{\"text\":\"React 状态管理（3）：Mobx 使用模式\",\"link\":\"React 状态管理（3）：Mobx 使用模式\"},{\"text\":\"React 状态管理（4）：不同方式对比\",\"link\":\"React 状态管理（4）：不同方式对比\"},{\"text\":\"路由的魔法：React Router\",\"link\":\"路由的魔法：React Router\"},{\"text\":\"服务器端渲染（1）：基本套路\",\"link\":\"服务器端渲染（1）：基本套路\"},{\"text\":\"服务器端渲染（2):理解Nextjs\",\"link\":\"服务器端渲染（2）理解NextJS\"},{\"text\":\"React 的未来（1）： 拥抱异步渲染\",\"link\":\"React 的未来（1）： 拥抱异步渲染\"},{\"text\":\"React 的未来（2）：Suspense 带来的异步操作革命\",\"link\":\"React 的未来（2）：Suspense 带来的异步操作革命\"},{\"text\":\"React 的未来（3）：函数化的 Hooks\",\"link\":\"React 的未来（3）：函数化的 Hooks\"}]},{\"text\":\"React搞定复杂项目状态管理\",\"base\":\"/react/React搞定复杂项目状态管理/\",\"collapsed\":false,\"items\":[]},{\"text\":\"React后台管理系统项目实战\",\"base\":\"/react/React后台管理系统项目实战/\",\"collapsed\":false,\"items\":[]},{\"text\":\"慕课网最新React技术栈，实战复杂低代码项目-仿问卷星\",\"base\":\"/react/慕课网最新React技术栈，实战复杂低代码项目-仿问卷星/\",\"collapsed\":false,\"items\":[]},{\"text\":\"React状态管理\",\"base\":\"/react/状态管理/\",\"collapsed\":false,\"items\":[{\"text\":\"zustand\",\"link\":\"zustand\"},{\"text\":\"zustand翻译文档\",\"link\":\"zustand翻译文档\"}]},{\"text\":\"开发一个组件库\",\"base\":\"/react/开发一个组件库/\",\"items\":[{\"text\":\"如何完善组件单测\",\"link\":\"如何完善组件单测\"},{\"text\":\"handlebars模板\",\"link\":\"handlebars模板\"}]},{\"text\":\"React好用的插件\",\"base\":\"/react/React好用的插件/\",\"items\":[{\"text\":\"js-pinyin\",\"link\":\"js-pinyin\"},{\"text\":\"jsbarcode\",\"link\":\"jsbarcode\"},{\"text\":\"react-jsx-parse\",\"link\":\"react-jsx-parse\"},{\"text\":\"react-load-script\",\"link\":\"react-load-script\"},{\"text\":\"react-to-print\",\"link\":\"react-to-print\"},{\"text\":\"react-viewer\",\"link\":\"react-viewer\"},{\"text\":\"react-hook-form\",\"link\":\"react-hook-form\"},{\"text\":\"react-window-infinite-loader\",\"link\":\"react-window-infinite-loader\"},{\"text\":\"react-window-infinite-loader\",\"link\":\"react-window-infinite-loader\"},{\"text\":\"react-window-infinite-loader\",\"link\":\"react-window-infinite-loader\"}]}]},\"/typescript/\":{\"base\":\"/typescript/\",\"items\":[{\"text\":\"TypeScript\",\"base\":\"/typescript/\",\"collapsed\":false,\"items\":[{\"text\":\"Redux\",\"link\":\"Redux\"}]},{\"text\":\"TS 从入门到深度掌握，晋级TypeScript高手实战课程\",\"base\":\"/typescript/TS 从入门到深度掌握，晋级TypeScript高手实战课程/\",\"collapsed\":false,\"items\":[{\"text\":\"第10章TS声明文件，TS模块.md\",\"link\":\"第10章TS声明文件，TS模块\"}]},{\"text\":\"晋级TypeScript高手，成为抢手的前端开发人才\",\"base\":\"/typescript/晋级TypeScript高手，成为抢手的前端开发人才/\",\"collapsed\":false,\"items\":[{\"text\":\"第07章 泛型类+泛型接口+泛型类约束的复杂应用【无比重要的深度技能】\",\"link\":\"第07章 泛型类+泛型接口+泛型类约束的复杂应用【无比重要的深度技能】\"},{\"text\":\"第08章 深度掌握泛型函数、泛型函数重载【无比重要的深度技能】\",\"link\":\"第08章 深度掌握泛型函数、泛型函数重载【无比重要的深度技能】\"},{\"text\":\"第09章 深入infer、TS高级类型、泛型再进阶【全方位深度掌握 TS 泛型】\",\"link\":\"第09章 深入infer、TS高级类型、泛型再进阶【全方位深度掌握 TS 泛型】\"},{\"text\":\"第08章 深度掌握泛型函数、泛型函数重载【无比重要的深度技能】\",\"link\":\"第08章 深度掌握泛型函数、泛型函数重载【无比重要的深度技能】\"}]}]},\"/css3/\":{\"base\":\"/css3/\",\"items\":[{\"text\":\"现代web布局\",\"base\":\"/css3/现代web布局/\",\"collapsed\":false,\"items\":[{\"text\":\"Web 布局技术演进：了解 Web 布局发展史\",\"link\":\"01\"},{\"text\":\"现代 Web 布局技术术语\",\"link\":\"02\"},{\"text\":\"Flexbox 布局基础使用\",\"link\":\"03\"},{\"text\":\"Flexbox 布局中的对齐方式\",\"link\":\"04\"},{\"text\":\"Flexbox 布局中的 flex 属性的基础运用\",\"link\":\"05\"},{\"text\":\"Flexbox 中的计算：通过扩展因子比例来扩展 Flex 项目\",\"link\":\"06\"},{\"text\":\"Flexbox 中的计算：通过收缩因子比例收缩 Flex 项目\",\"link\":\"07\"},{\"text\":\"Flexbox 布局中的 flex-basis：谁能决定 Flex 项目的大小？\",\"link\":\"08\"},{\"text\":\"使用 Flexbox 构建经典布局：10 种经典 Web 布局\",\"link\":\"09\"},{\"text\":\"10\",\"link\":\"10\"}]},{\"text\":\"postcss\",\"base\":\"/css3/postcss/\",\"collapsed\":false,\"items\":[{\"text\":\"postcss-prefix-selector增加统一作用域\",\"link\":\"postcss-prefix-selector增加统一作用域\"}]}]},\"/electron/\":{\"base\":\"/electron/\",\"items\":[{\"text\":\"electron开发实战\",\"base\":\"/electron/electron开发实战/\",\"collapsed\":false,\"items\":[{\"text\":\"Electron 环境搭建+前期准备\",\"link\":\"electron环境搭建\"},{\"text\":\"开发一个简单版的番茄钟\",\"link\":\"开发一个简单版的番茄钟\"},{\"text\":\"APP特性\",\"link\":\"App特性\"},{\"text\":\"原生GUI\",\"link\":\"原生GUI\"},{\"text\":\"使用NodeJs调用原生模块\",\"link\":\"使用NodeJs调用原生模块\"},{\"text\":\"释放前端想象力\",\"link\":\"释放前端想象力\"},{\"text\":\"Electron优化白屏\",\"link\":\"electron优化白屏\"},{\"text\":\"Electron应用打包\",\"link\":\"electron应用打包\"}]},{\"text\":\"Electron数据持久化方案\",\"base\":\"/electron/数据持久化方案/\",\"collapsed\":false,\"items\":[{\"text\":\"electron-store\",\"link\":\"electron-store\"},{\"text\":\"数据持久缓存库lndb\",\"link\":\"数据持久缓存库lndb\"}]},{\"text\":\"react中开发踩坑\",\"link\":\"/electron/react中开发踩坑\"}]}},\"outline\":{\"level\":[2,6],\"label\":\"本页目录\"},\"docFooter\":{\"prev\":\"上一篇\",\"next\":\"下一篇\"},\"lastUpdated\":{\"text\":\"上次更新\"},\"returnToTopLabel\":\"返回顶部\",\"darkModeSwitchLabel\":\"外观\",\"sidebarMenuLabel\":\"归档\",\"editLink\":{\"pattern\":\"https://github.com/xxx\",\"text\":\"在 github 上编辑此页\"},\"search\":{\"provider\":\"local\",\"options\":{\"translations\":{\"button\":{\"buttonText\":\"搜索文档\",\"buttonAriaLabel\":\"搜索文档\"},\"modal\":{\"noResultsText\":\"无法找到相关结果\",\"resetButtonTitle\":\"清除查询条件\",\"footer\":{\"selectText\":\"选择\",\"navigateText\":\"切换\"}}}}}},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":true}");</script>
    
  </body>
</html>